Fixed an arrow navigation bug
Brian Vaughn committed
Apr 3, 2019 at 08:12 UTC
6493db4acc44dad64c43e105fd268fc1d143c134
2 files changed
+24
-9
src/devtools/views/Components/SearchInput.js
+20
-9
@@ -17,6 +17,8 @@ export default function SearchInput(props: Props) {
17
searchIndex,
18
searchResults,
19
searchText,
20
+ selectNextElementInTree,
21
+ selectPreviousElementInTree,
22
setSearchText,
23
} = useContext(TreeContext);
24
@@ -31,15 +33,24 @@ export default function SearchInput(props: Props) {
33
setSearchText('');
34
}, [setSearchText]);
35
34
- const handleKeyDown = useCallback(event => {
35
- if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
36
- // It's convenient for up/down arrow keys to change the selected element when focused on the search input.
37
- // But e.g. left/right arrow keys should move the text cursor.
38
- // For now just block everything except for up/down arrow keys.
39
- // TODO Revisit this approach.
40
- event.stopPropagation();
41
- }
42
- }, []);
36
+ const handleKeyDown = useCallback(
37
+ event => {
38
+ // For convenience, let up/down arrow keys change Tree selection.
39
+ switch (event.key) {
40
+ case 'ArrowDown':
41
+ selectNextElementInTree();
42
+ event.preventDefault();
43
+ break;
44
+ case 'ArrowUp':
45
+ selectPreviousElementInTree();
46
+ event.preventDefault();
47
+ break;
48
+ default:
49
+ break;
50
+ }
51
+ },
52
+ [selectNextElementInTree, selectPreviousElementInTree]
53
+ );
54
55
const handleInputKeyPress = useCallback(
56
({ key }) => {
src/devtools/views/Components/Tree.js
+4
@@ -51,6 +51,10 @@ export default function Tree(props: Props) {
51
}
52
53
const handleKeyDown = (event: KeyboardEvent) => {
54
+ if ((event: any).target.tagName === 'INPUT') {
55
+ return;
56
+ }
57
+
58
// eslint-disable-next-line default-case
59
switch (event.key) {
60
case 'ArrowDown':