Vue warning in jest for permissions editor

[nickvergessen]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

      [Vue warn]: Error in nextTick: "Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times"
      
      found in
      
      ---> <Modal>
             <PermissionsEditor>
               <ParticipantPermissionsEditor>
                 <Root>

[nickvergessen]

Still the case:

   console.error
      [Vue warn]: Error in nextTick: "Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times"
      
      found in
      
      ---> <NcModal>
             <PermissionsEditor>
               <ParticipantPermissionsEditor>
                 <Root>

      at warn (node_modules/vue/dist/vue.runtime.common.dev.js:4516:21)
      at logError (node_modules/vue/dist/vue.runtime.common.dev.js:2917:9)
      at globalHandleError (node_modules/vue/dist/vue.runtime.common.dev.js:2913:5)
      at handleError (node_modules/vue/dist/vue.runtime.common.dev.js:2880:9)
      at Array.<anonymous> (node_modules/vue/dist/vue.runtime.common.dev.js:3018:17)
      at flushCallbacks (node_modules/vue/dist/vue.runtime.common.dev.js:2937:18)

    console.error
      Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times
          at updateTabbableNodes (/home/nickv/Nextcloud/Repositories/nextcloud-vue/node_modules/focus-trap/index.js:330:13)
          at Object.updateTabbableNodes (/home/nickv/Nextcloud/Repositories/nextcloud-vue/node_modules/focus-trap/index.js:653:9)
          at VueComponent.e (/home/nickv/Nextcloud/Repositories/nextcloud-vue/dist/Components/webpack:/NextcloudVue/src/components/NcModal/NcModal.vue:695:1)
          at Array.<anonymous> (/home/nickv/Nextcloud/25/server/appsbabies/spreed/node_modules/vue/dist/vue.runtime.common.dev.js:3015:20)
          at flushCallbacks (/home/nickv/Nextcloud/25/server/appsbabies/spreed/node_modules/vue/dist/vue.runtime.common.dev.js:2937:18)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)

      at logError (node_modules/vue/dist/vue.runtime.common.dev.js:2921:17)
      at globalHandleError (node_modules/vue/dist/vue.runtime.common.dev.js:2913:5)
      at handleError (node_modules/vue/dist/vue.runtime.common.dev.js:2880:9)
      at Array.<anonymous> (node_modules/vue/dist/vue.runtime.common.dev.js:3018:17)
      at flushCallbacks (node_modules/vue/dist/vue.runtime.common.dev.js:2937:18)

After a bit of playing around it turns out that replacing this.$nextTick() with a setTimeout(…, 50) in useFocusTrap() of NcModal makes the error go away. I guess the test is just faster then 50ms but I come to the suspicion that it's a bug in the Vue component?

cc @juliushaertl @PVince81 maybe you have any clue since you touched it after the original Dev left.