Merge pull request #5840 from nextcloud-libraries/backport/5833/next

[next] fix(NcAppSidebar): manage focus only after transition has finished

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