Fix focus not returned to callingElement on modal close

Close #8164

Co-authored-by: ivk <ivk@tutao.de>

src/common/gui/base/Modal.ts

@@ -74,11 +74,11 @@ class Modal implements Component {
 							style: {
 								zIndex: LayerType.Modal + 1 + i,
 							},
-							onbeforeremove: (vnode) => {
+							onbeforeremove: async (vnode) => {
 								if (wrapper.needsBg) {
 									this.closingComponents.push(wrapper.component)
 
-									return Promise.all([
+									await Promise.all([
 										this.addAnimation(vnode.dom as HTMLElement, false).then(() => {
 											remove(this.closingComponents, wrapper.component)
 
@@ -87,16 +87,22 @@ class Modal implements Component {
 											}
 										}),
 										wrapper.component.hideAnimation(),
-									]).then(() => {
-										m.redraw()
-									})
+									])
 								} else {
 									if (this.components.length === 0 && this.closingComponents.length === 0) {
 										this.visible = false
 									}
 
-									return wrapper.component.hideAnimation().then(() => m.redraw())
+									await wrapper.component.hideAnimation()
 								}
+
+								m.redraw()
+
+								// Return the focus back to it's calling element.
+								// We focus callingElement onbeforeremove with requestAnimationFrame because
+								// focus can't happen if callingElement is inert. And when returning
+								// focus to main view, focus must happen after redraw that removes inert
+								requestAnimationFrame(() => wrapper.component.callingElement()?.focus())
 							},
 						},
 						m(wrapper.component),
@@ -213,9 +219,6 @@ class Modal implements Component {
 			// the removed component was the last component, so we can now register the shortcuts of the now last component
 			keyManager.registerModalShortcuts(this.components[this.components.length - 1].component.shortcuts())
 		}
-
-		// Return the focus back to it's calling element.
-		component.callingElement()?.focus()
 	}
 
 	/**