nextcloud
Vue warning in jest for permissions editor
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>
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.
idea: mock the focus trap globally as there is no value testing it here
maybe $nextTick is not enough for having the UI fully rendered, so at this time perhaps there is no tabbable element yet, but after 50ms there is one. Still, kind of strange and doesn't feel logical.
let's go with the workaround for now and keep an eye in case similar errors appear elsewhere
We can also just keep the error showing up, might help to find an issue if the focus trap doesn't work anymore in the permission editor.
me goes testing
actually confirmed, the modal does not work with the focus trap....
[Vue warn]: $attrs is readonly.
found in
---> <VPopperContent>
<VPopper>
<VDropdown>
<NcPopover>
<NcActions>
<Participant> at src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
<ParticipantsList> at src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
<CurrentParticipants> at src/components/RightSidebar/Participants/CurrentParticipants/CurrentParticipants.vue
<ParticipantsTab> at src/components/RightSidebar/Participants/ParticipantsTab.vue
<NcAppSidebarTab>
<NcAppSidebarTabs>
<NcAppSidebar>
<RightSidebar> at src/components/RightSidebar/RightSidebar.vue
<NcContent>
<App> at src/App.vue
<Root> [talk-main.js:86121:21](https://nextcloud25.local/appsbabies/spreed/js/talk-main.js)
[Vue warn]: $listeners is readonly.
found in
---> <VPopperContent>
<VPopper>
<VDropdown>
<NcPopover>
<NcActions>
<Participant> at src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
<ParticipantsList> at src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
<CurrentParticipants> at src/components/RightSidebar/Participants/CurrentParticipants/CurrentParticipants.vue
<ParticipantsTab> at src/components/RightSidebar/Participants/ParticipantsTab.vue
<NcAppSidebarTab>
<NcAppSidebarTabs>
<NcAppSidebar>
<RightSidebar> at src/components/RightSidebar/RightSidebar.vue
<NcContent>
<App> at src/App.vue
<Root>
Looks like https://github.com/LinusBorg/portal-vue/issues/201#issuecomment-484452281
Might be worth a try to add this to the web pack config:
{
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js'
}
}
}
Will try to work around this solution: https://stackoverflow.com/questions/72762696/jest-error-your-focus-trap-must-have-at-least-one-container-with-at-least-one
