fix(editor): DP-179668 some toolbar buttons not returning focus to editor (#1117)

Author: maysamkf

packages/dialtone-vue/recipes/conversation_view/editor/EditorToolbarDropdownButton.vue

@@ -4,6 +4,7 @@
     padding="small"
     navigation-type="arrow-keys"
     placement="bottom-start"
+    @opened="onDropdownOpened"
   >
     <template #anchor="{ attrs }">
       <dt-button
@@ -28,10 +29,10 @@
         </template>
       </dt-button>
     </template>
-    <template #list="{ close }">
+    <template #list="{ close: dropdownClose }">
       <slot
         name="list"
-        :close="close"
+        :close="(cb) => { pendingCallback = cb; dropdownClose(); }"
       />
     </template>
   </dt-dropdown>
@@ -110,5 +111,22 @@ export default {
      */
     'shift-focus-left',
   ],
+
+  data () {
+    return {
+      pendingCallback: null,
+    };
+  },
+
+  methods: {
+    // Wait until the dropdown is fully closed so the modal's anchor focus
+    // completes first, then the callback can override it (e.g. to focus the editor).
+    onDropdownOpened (isOpen) {
+      if (!isOpen && typeof this.pendingCallback === 'function') {
+        this.pendingCallback();
+        this.pendingCallback = null;
+      }
+    },
+  },
 };
 </script>

packages/dialtone-vue/recipes/conversation_view/editor/EditorToolbarPopoverButton.vue

@@ -5,6 +5,7 @@
     navigation-type="arrow-keys"
     placement="bottom-start"
     :open-with-arrow-keys="true"
+    @opened="onPopoverOpened"
   >
     <template #anchor="{ attrs }">
       <dt-button
@@ -29,10 +30,10 @@
         </template>
       </dt-button>
     </template>
-    <template #content="{ close }">
+    <template #content="{ close: popoverClose }">
       <slot
         name="content"
-        :close="close"
+        :close="(cb) => { pendingCallback = cb; popoverClose(); }"
       />
     </template>
   </dt-popover>
@@ -111,5 +112,22 @@ export default {
      */
     'shift-focus-left',
   ],
+
+  data () {
+    return {
+      pendingCallback: null,
+    };
+  },
+
+  methods: {
+    // Wait until the dropdown is fully closed so the modal's anchor focus
+    // completes first, then the callback can override it (e.g. to focus the editor).
+    onPopoverOpened (isOpen) {
+      if (!isOpen && typeof this.pendingCallback === 'function') {
+        this.pendingCallback();
+        this.pendingCallback = null;
+      }
+    },
+  },
 };
 </script>

packages/dialtone-vue/recipes/conversation_view/editor/editor.vue

@@ -69,7 +69,7 @@
                       role="option"
                       navigation-type="arrow-keys"
                       @click="
-                        close();
+                        close(focusEditor);
                         onFontStyleSelect(fontStyle.value)
                       "
                     >
@@ -103,7 +103,7 @@
                 role="menuitem"
                 navigation-type="arrow-keys"
                 @click="
-                  close();
+                  close(focusEditor);
                   onFontSizeSelect(fontSize.value, $event)
                 "
               >
@@ -204,7 +204,7 @@
                         navigation-type="arrow-keys"
                         @click="
                           insertVariable(category.name, item);
-                          close();
+                          close(focusEditor);
                         "
                       >
                         {{ item.name }}
@@ -1176,6 +1176,10 @@ export default {
     removeClassStyleAttrs,
     addClassStyleAttrs,
 
+    focusEditor () {
+      this.$refs.richTextEditor?.editor?.commands.focus();
+    },
+
     onInputFocus (event) {
       event?.stopPropagation();
     },