diff options
-rw-r--r-- | app/src/Keyboard/Keys/Key.js | 6 | ||||
-rw-r--r-- | app/src/Keyboard/Keys/KeyValue.js | 19 | ||||
-rw-r--r-- | app/src/ValuePicker/index.js | 3 |
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]) |