From dbf66e6b4255503fd762a64d3e4db49d13e00683 Mon Sep 17 00:00:00 2001
From: fuwaa <kawaii@duck.com>
Date: Mon, 22 Aug 2022 15:17:43 +0800
Subject: [PATCH] fixed popup issue

---
 cz.json                   |  7 -------
 keymaps/wordcount.json    |  2 +-
 lib/components/palette.js | 22 +++++-----------------
 3 files changed, 6 insertions(+), 25 deletions(-)
 delete mode 100644 cz.json

diff --git a/cz.json b/cz.json
deleted file mode 100644
index e93e6dd..0000000
--- a/cz.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "commitizen": {
-    "name": "cz_conventional_commits",
-    "version": "0.0.1",
-    "tag_format": "v0.0.1"
-  }
-}
diff --git a/keymaps/wordcount.json b/keymaps/wordcount.json
index 28c2400..752b830 100644
--- a/keymaps/wordcount.json
+++ b/keymaps/wordcount.json
@@ -1,5 +1,5 @@
 {
   "body": {
-    "ctrl-shift-,": "commandpalette:toggle"
+    "ctrl-k": "commandpalette:toggle"
   }
 }
diff --git a/lib/components/palette.js b/lib/components/palette.js
index cff6d3b..572467e 100644
--- a/lib/components/palette.js
+++ b/lib/components/palette.js
@@ -7,8 +7,6 @@ const CommandPalette = (props) => {
   const modal = useModal();
   const { Dialog } = inkdrop.components.classes;
 
-  const searchRef = useRef(null);
-
   const toggle = useCallback(() => {
     modal.show();
     logger.debug("Dialog was toggled!");
@@ -21,23 +19,14 @@ const CommandPalette = (props) => {
     return () => sub.dispose();
   }, [toggle]);
 
+  // focus text box when dialog is shown
   useLayoutEffect(() => {
-    document
-      .getElementById("cpInput")
-      .addEventListener("visibilitychange", onVisibilityChange);
-
-    return () =>
-      document
-        .getElementById("cpInput")
-        .removeEventListener("visibilitychange", onVisibilityChange);
+    setTimeout(() => {
+      const textbox = document.getElementById("cpInput");
+      textbox.focus();
+    }, 50);
   });
 
-  const onVisibilityChange = () => {
-    if (element.classList.contains("visible")) {
-      document.getElementById("cpInput").focus();
-    }
-  };
-
   return (
     <Dialog {...modal.state} onBackdropClick={modal.close}>
       <Dialog.Content className="commandpalette">
@@ -50,7 +39,6 @@ const CommandPalette = (props) => {
                 spellCheck="false"
                 className="cpInput"
                 id="cpInput"
-                ref={searchRef}
               />
             </div>
           </div>