Fix value picker

3 files changed, 19 insertions, 9 deletions

diff --git a/app/src/Keyboard/Keys/Key.js b/app/src/Keyboard/Keys/Key.js
index 7b4efcc..7374eab 100644
--- a/app/src/Keyboard/Keys/Key.js
+++ b/app/src/Keyboard/Keys/Key.js
@@ -119,6 +119,7 @@ export default function Key(props) {
     setEditing(editing)
   }
   function handleSelectBehaviour(event) {
+    event.stopPropagation()
     setEditing({
       target: event.target,
       targets: getSearchTargets('behaviour', value),
@@ -156,7 +157,10 @@ export default function Key(props) {
       // @mouseleave="onMouseLeave"
     >
     {behaviour ? (
-      <span className={styles['behaviour-binding']} onClick={handleSelectBehaviour}>
+      <span
+        className={styles['behaviour-binding']}
+        onClick={handleSelectBehaviour}
+      >
         {behaviour.code}
       </span>
     ) : null}
diff --git a/app/src/Keyboard/Keys/KeyValue.js b/app/src/Keyboard/Keys/KeyValue.js
index 71f6960..7aea967 100644
--- a/app/src/Keyboard/Keys/KeyValue.js
+++ b/app/src/Keyboard/Keys/KeyValue.js
@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import Icon from '../../Common/Icon'
 import styles from './styles.module.css'
 
@@ -11,16 +13,21 @@ export default function KeyValue(props) {
   const text = source && <span>{source?.symbol || source?.code}</span>
   const icon = source?.faIcon && <Icon name={source.faIcon} />
 
+  const handleClick = useMemo(() => function (event) {
+    event.stopPropagation()
+    onSelect({
+      target: event.target,
+      codeIndex: index,
+      code: value,
+      param
+    })
+  }, [param, value, index, onSelect])
+
   return (
     <span
       className={styles.code}
       title={title}
-      onClick={event => onSelect({
-        target: event.target,
-        codeIndex: index,
-        code: value,
-        param
-      })}
+      onClick={handleClick}
     >
       {icon || text || <NullKey />}
     </span>
diff --git a/app/src/ValuePicker/index.js b/app/src/ValuePicker/index.js
index a98b6a3..d85b5c6 100644
--- a/app/src/ValuePicker/index.js
+++ b/app/src/ValuePicker/index.js
@@ -31,7 +31,6 @@ function ValuePicker (props) {
   const [highlighted, setHighlighted] = useState(null)
   const [showAll, setShowAll] = useState(false)
 
-
   const results = useMemo(() => {
     const options = { key: searchKey, limit: 30 }
     const filtered = fuzzysort.go(query, choices, options)
@@ -61,7 +60,7 @@ function ValuePicker (props) {
   }, [onSelect])
 
   const handleClickOutside = useMemo(() => function(event) {
-    if (listRef.current?.contains(event.target)) {
+    if (!listRef.current.contains(event.target)) {
       onCancel()
     }
   }, [listRef, onCancel])