Use new keycodes

Fixes #197
day8 · Nov 23, 2023 · dab03ef · dab03ef
1 parent bf6ec13
commit dab03ef
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 
 - Selected tabs & radio buttons no longer trigger their on-change handler (#333)
 - Use alert-circle for input-text error state, not spinner (#325)
+- Stop using deprecated keycodes. This fixes some edge cases with keyboard layouts. (#197)
 
 ## 2.13.2 (2021-02-24)
 

diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs
@@ -210,7 +210,7 @@
                             (reset! ignore-click true)))   ;; TODO: Hmmm, have a look at calling preventDefault (and stopProp?) and removing the ignore-click stuff
           :on-key-down   (handler-fn
                           (key-handler event)
-                          (when (= (.-which event) 13)     ;; Pressing enter on an anchor also triggers click event, which we don't want
+                          (when (= (.-key event) "Enter")     ;; Pressing enter on an anchor also triggers click event, which we don't want
                             (reset! ignore-click true)))}  ;; TODO: Hmmm, have a look at calling preventDefault (and stopProp?) and removing the ignore-click stuff
          [:span (when title?
                   {:title text})
@@ -571,16 +571,16 @@
               press-end         #(press-home-or-end :end)
               key-handler      #(if disabled?
                                   false
-                                  (case (.-which %)
-                                    13 (press-enter)
-                                    27 (press-escape)
-                                    9  (press-tab (.-shiftKey %))
-                                    38 (press-up)
-                                    40 (press-down)
-                                    33 (press-page-up)
-                                    34 (press-page-down)
-                                    36 (press-home)
-                                    35 (press-end)
+                                  (case (.-key %)
+                                    "Enter"     (press-enter)
+                                    "Escape"    (press-escape)
+                                    "Tab"       (press-tab (.-shiftKey %))
+                                    "ArrowUp"   (press-up)
+                                    "ArrowDown" (press-down)
+                                    "PageUp"    (press-page-up)
+                                    "PageDown"  (press-page-down)
+                                    "Home"      (press-home)
+                                    "End"       (press-end)
                                     (or filter-box? free-text?)))                  ;; Use this boolean to allow/prevent the key from being processed by the text box
               dropdown         [:div
                                 (merge

diff --git a/src/re_com/input_text.cljs b/src/re_com/input_text.cljs
@@ -154,9 +154,9 @@
                           :on-key-up   (handler-fn
                                         (if disabled?
                                           (.preventDefault event)
-                                          (case (.-which event)
-                                            13 (on-change-handler)
-                                            27 (reset! internal-model @external-model)
+                                          (case (.-key event)
+                                            "Enter"  (on-change-handler)
+                                            "Escape" (reset! internal-model @external-model)
                                             true)))}
                          attr)]]
                       (when (and status-icon? status)

diff --git a/src/re_com/input_time.cljs b/src/re_com/input_time.cljs
@@ -124,7 +124,7 @@
 (defn- lose-focus-if-enter
   "When Enter is pressed, force the component to lose focus"
   [ev]
-  (when (= (.-keyCode ev) 13)
+  (when (= (.-key ev) "Enter")
     (-> ev .-target .blur)
     true))
 

diff --git a/src/re_com/typeahead.cljs b/src/re_com/typeahead.cljs
@@ -213,14 +213,14 @@
 
 (defn- input-text-on-key-down!
   [state-atom event]
-  (condp = (.-which event)
-    goog.events.KeyCodes.UP     (swap! state-atom activate-suggestion-prev)
-    goog.events.KeyCodes.DOWN   (swap! state-atom activate-suggestion-next)
-    goog.events.KeyCodes.ENTER  (swap! state-atom choose-suggestion-active)
-    goog.events.KeyCodes.ESC    (swap! state-atom got-suggestions [])
+  (condp = (.-key event)
+    "ArrowUp"   (swap! state-atom activate-suggestion-prev)
+    "ArrowDown" (swap! state-atom activate-suggestion-next)
+    "Enter"     (swap! state-atom choose-suggestion-active)
+    "Escape"    (swap! state-atom got-suggestions [])
     ;; tab requires special treatment
     ;; trap it IFF there are suggestions, otherwise let the input defocus
-    goog.events.KeyCodes.TAB
+    "Tab"
     (if (not-empty (:suggestions @state-atom))
       (do (swap! state-atom activate-suggestion-next)
           (.preventDefault event))