From d6421382e4146451fc2f610bec3572577b759997 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 80f72b13d6..57960cc357 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -959,8 +959,6 @@ export default { }, open() { - this.toggleFocusTrap() - this.checkToggleButtonContainerAvailability() }, }, @@ -971,15 +969,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() - }, - beforeUnmount() { // Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received. this.$emit('closed') @@ -1051,6 +1040,13 @@ export default { }, 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 * @@ -1066,6 +1062,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