Fix widget Editor focus and cross modal focusing

apostrophecms · Nov 21, 2024 · 866333f · 866333f
1 parent d3fd291
commit 866333f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue b/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue
@@ -429,11 +429,11 @@ export default {
     },
 
     attachKeyboardFocusHandler() {
-      this.$refs.wrapper.addEventListener('keydown', this.handleKeyboardFocus);
+      this.$refs.wrapper?.addEventListener('keydown', this.handleKeyboardFocus);
     },
 
     removeKeyboardFocusHandler() {
-      this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardFocus);
+      this.$refs.wrapper?.removeEventListener('keydown', this.handleKeyboardFocus);
     },
 
     // Focus parent, useful for obtrusive UI

diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue
@@ -13,7 +13,7 @@
       aria-modal="true"
       :aria-labelledby="props.modalData.id"
       data-apos-modal
-      @focus.capture="storeFocusedElement"
+      @focus.capture="captureFocus"
       @esc="close"
       @keydown.tab="onTab"
     >
@@ -264,6 +264,11 @@ function onLeave() {
   emit('no-modal');
 }
 
+function captureFocus(e) {
+  storeFocusedElement(e);
+  store.updateModalData(props.modalData.id, { focusedElement: e.target });
+}
+
 async function trapFocus() {
   if (modalEl?.value) {
     const elementSelectors = [

diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
@@ -51,7 +51,6 @@
       />
       <AposButton
         type="primary"
-        data-apos-focus-priority
         :label="saveLabel"
         :disabled="errorCount > 0"
         @click="save"