From ce944c6be6576f862ce386515ab433510fb21843 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Thu, 18 Jul 2024 20:48:51 +0200 Subject: [PATCH] fix(NcAppSidebar): manage focus only after transition has finished Signed-off-by: Grigorii K. Shartsev --- src/components/NcAppSidebar/NcAppSidebar.vue | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 8bde88f915..98f7a65ced 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -962,8 +962,6 @@ export default { }, open() { - this.toggleFocusTrap() - this.checkToggleButtonContainerAvailability() }, }, @@ -974,15 +972,6 @@ export default { this.checkToggleButtonContainerAvailability() }, - mounted() { - // Focus sidebar on open only if it was opened by a user interaction - if (this.elementToReturnFocus) { - this.focus() - } - - this.toggleFocusTrap() - }, - beforeDestroy() { // Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received. this.$emit('closed') @@ -1061,6 +1050,13 @@ export default { this.$emit('opening', element) }, onAfterEnter(element) { + // Focus sidebar on open only if it was opened by a user interaction + if (this.elementToReturnFocus) { + this.focus() + } + + this.toggleFocusTrap() + /** * The sidebar is opened and the transition is complete * @@ -1085,6 +1081,8 @@ export default { */ this.$emit('closed', element) + this.toggleFocusTrap() + // Return focus to the element that had focus before the sidebar was opened this.elementToReturnFocus?.focus({ focusVisible: true }) this.elementToReturnFocus = null