コンテキストメニューの開閉によるfocusやblurに対する処理

jdkfx · Aug 5, 2024 · f8763b7 · f8763b7
1 parent 9bdb2e5
commit f8763b7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
@@ -123,14 +123,19 @@
                 class="word-input"
                 dense
                 :disable="uiLocked"
+                @focus="clearSurfaceInputSelection()"
                 @blur="setSurface(surface)"
                 @keydown.enter="yomiFocus"
               >
                 <ContextMenu
                   ref="surfaceContextMenu"
                   :header="surfaceContextMenuHeader"
                   :menudata="surfaceContextMenudata"
-                  @beforeShow="readyForSurfaceContextMenu"
+                  @beforeShow="
+                    readyForSurfaceContextMenu();
+                    startSurfaceContextMenuOperation();
+                  "
+                  @beforeHide="endSurfaceContextMenuOperation()"
                 />
               </QInput>
             </div>
@@ -143,6 +148,7 @@
                 dense
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
+                @focus="clearYomiInputSelection()"
                 @blur="setYomi(yomi)"
                 @keydown.enter="setYomiWhenEnter"
               >
@@ -153,7 +159,11 @@
                   ref="yomiContextMenu"
                   :header="yomiContextMenuHeader"
                   :menudata="yomiContextMenudata"
-                  @beforeShow="readyForYomiContextMenu"
+                  @beforeShow="
+                    readyForYomiContextMenu();
+                    startYomiContextMenuOperation();
+                  "
+                  @beforeHide="endYomiContextMenuOperation()"
                 />
               </QInput>
             </div>
@@ -687,13 +697,19 @@ const {
   contextMenuHeader: surfaceContextMenuHeader,
   contextMenudata: surfaceContextMenudata,
   readyForContextMenu: readyForSurfaceContextMenu,
+  clearInputSelection: clearSurfaceInputSelection,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
+  endContextMenuOperation: endSurfaceContextMenuOperation,
 } = useRightClickContextMenu(surfaceInput, surface, ref("surface"));
 
 const {
   contextMenu: yomiContextMenu,
   contextMenuHeader: yomiContextMenuHeader,
   contextMenudata: yomiContextMenudata,
   readyForContextMenu: readyForYomiContextMenu,
+  clearInputSelection: clearYomiInputSelection,
+  startContextMenuOperation: startYomiContextMenuOperation,
+  endContextMenuOperation: endYomiContextMenuOperation,
 } = useRightClickContextMenu(yomiInput, yomi, ref("yomi"));
 </script>
 

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
@@ -19,6 +19,12 @@ export function useRightClickContextMenu(
 ) {
   const inputSelection = new SelectionHelperForQInput(qInputRef);
 
+  /**
+   * コンテキストメニューの開閉によりFocusやBlurが発生する可能性のある間は`true`
+   * no-focusを付けた場合と付けてない場合でタイミングが異なるため、両方に対応
+   */
+  const willFocusOrBlur = ref(false);
+
   const contextMenu = ref<InstanceType<typeof ContextMenu>>();
 
   const contextMenuHeader = ref<string | undefined>("");
@@ -70,17 +76,17 @@ export function useRightClickContextMenu(
       label: "切り取り",
       onClick: async () => {
         contextMenu.value?.hide();
-        handleCut();
+        await handleCut();
       },
       disableWhenUiLocked: false,
     },
     {
       type: "button",
       label: "コピー",
-      onClick: () => {
+      onClick: async () => {
         contextMenu.value?.hide();
         if (inputSelection) {
-          navigator.clipboard.writeText(inputSelection.getAsString());
+          await navigator.clipboard.writeText(inputSelection.getAsString());
         }
       },
       disableWhenUiLocked: false,
@@ -116,7 +122,7 @@ export function useRightClickContextMenu(
       inputField.value,
     );
     await nextTick();
-    navigator.clipboard.writeText(text);
+    await navigator.clipboard.writeText(text);
     inputSelection.setCursorPosition(start);
   };
 
@@ -148,10 +154,29 @@ export function useRightClickContextMenu(
     );
   };
 
+  const clearInputSelection = () => {
+    console.log(willFocusOrBlur);
+    if (!willFocusOrBlur.value) {
+      inputSelection.toEmpty();
+    }
+  };
+
+  const startContextMenuOperation = () => {
+    willFocusOrBlur.value = true;
+  };
+
+  const endContextMenuOperation = async () => {
+    await nextTick();
+    willFocusOrBlur.value = false;
+  };
+
   return {
     contextMenu,
     contextMenuHeader,
     contextMenudata,
     readyForContextMenu,
+    clearInputSelection,
+    startContextMenuOperation,
+    endContextMenuOperation,
   };
 }