Moved blur/focus up to the AutoSizer wrapper and removed an effect+ref
Brian Vaughn committed
Apr 10, 2019 at 10:14 UTC
268a7cb5b49499b89fff86401387a9b85b3f5ee4
2 files changed
+33
-59
src/devtools/views/Components/Tree.css
+4
-4
@@ -4,6 +4,7 @@
4
display: flex;
5
flex-direction: column;
6
border-top: 1px solid var(--color-border);
7
+ padding: 0.25rem;
8
}
9
10
.SearchInput {
@@ -19,13 +20,12 @@
20
overflow: auto;
21
flex: 1 0 auto;
22
}
23
+.AutoSizerWrapper:focus {
24
+ outline: none;
25
+}
26
27
.List {
28
font-family: var(--font-family-monospace);
29
font-size: var(--font-size-monospace-normal);
30
line-height: var(--line-height-data);
31
}
28
-
29
-.InnerElementType:focus {
30
- outline: none;
31
-}
src/devtools/views/Components/Tree.js
+29
-55
@@ -41,7 +41,9 @@ export default function Tree(props: Props) {
41
ownerStack,
42
selectedElementID,
43
selectedElementIndex,
44
+ selectElementAtIndex,
45
selectNextElementInTree,
46
+ selectOwner,
47
selectParentElementInTree,
48
selectPreviousElementInTree,
49
} = useContext(TreeContext);
@@ -50,7 +52,6 @@ export default function Tree(props: Props) {
52
// $FlowFixMe https://github.com/facebook/flow/issues/7341
53
const listRef = useRef<FixedSizeList<ItemData> | null>(null);
54
const treeRef = useRef<HTMLDivElement | null>(null);
53
- const elementsRef = useRef<HTMLDivElement | null>(null);
55
56
const [treeFocused, setTreeFocused] = useState<boolean>(false);
57
@@ -147,29 +148,31 @@ export default function Tree(props: Props) {
148
store,
149
]);
150
150
- useEffect(() => {
151
- if (elementsRef.current === null) {
152
- return () => {};
153
- }
154
-
155
- const handleFocusIn = () => {
156
- setTreeFocused(true);
157
- };
151
+ const handleBlur = useCallback(() => setTreeFocused(false));
152
159
- const handleFocusOut = () => {
160
- setTreeFocused(false);
161
- };
153
+ const handleFocus = useCallback(() => {
154
+ setTreeFocused(true);
155
163
- const elementsElement = elementsRef.current;
164
-
165
- elementsElement.addEventListener('focusin', handleFocusIn);
166
- elementsElement.addEventListener('focusout', handleFocusOut);
156
+ if (selectedElementIndex === null && numElements > 0) {
157
+ selectElementAtIndex(0);
158
+ }
159
+ }, [numElements, selectedElementIndex, selectElementAtIndex]);
160
168
- return () => {
169
- elementsElement.removeEventListener('focusin', handleFocusIn);
170
- elementsElement.removeEventListener('focusout', handleFocusOut);
171
- };
172
- }, []);
161
+ const handleKeyPress = useCallback(
162
+ event => {
163
+ switch (event.key) {
164
+ case 'Enter':
165
+ case ' ':
166
+ if (selectedElementID !== null) {
167
+ selectOwner(selectedElementID);
168
+ }
169
+ break;
170
+ default:
171
+ break;
172
+ }
173
+ },
174
+ [selectedElementID, selectOwner]
175
+ );
176
177
// Let react-window know to re-render any time the underlying tree data changes.
178
// This includes the owner context, since it controls a filtered view of the tree.
@@ -196,8 +199,11 @@ export default function Tree(props: Props) {
199
</div>
200
<div
201
className={styles.AutoSizerWrapper}
202
+ onBlur={handleBlur}
203
+ onFocus={handleFocus}
204
+ onKeyPress={handleKeyPress}
205
onMouseLeave={handleMouseLeave}
200
- ref={elementsRef}
206
+ tabIndex={0}
207
>
208
<AutoSizer>
209
{({ height, width }) => (
@@ -223,36 +229,7 @@ export default function Tree(props: Props) {
229
}
230
231
function InnerElementType({ style, ...rest }) {
226
- const {
227
- numElements,
228
- ownerStack,
229
- selectedElementID,
230
- selectedElementIndex,
231
- selectElementAtIndex,
232
- selectOwner,
233
- } = useContext(TreeContext);
234
-
235
- const handleFocus = () => {
236
- if (selectedElementIndex === null && numElements > 0) {
237
- selectElementAtIndex(0);
238
- }
239
- };
240
-
241
- const handleKeyPress = useCallback(
242
- event => {
243
- switch (event.key) {
244
- case 'Enter':
245
- case ' ':
246
- if (selectedElementID !== null) {
247
- selectOwner(selectedElementID);
248
- }
249
- break;
250
- default:
251
- break;
252
- }
253
- },
254
- [selectedElementID, selectOwner]
255
- );
232
+ const { ownerStack } = useContext(TreeContext);
233
234
// The list may need to scroll horizontally due to deeply nested elements.
235
// We don't know the maximum scroll width up front, because we're windowing.
@@ -283,8 +260,6 @@ function InnerElementType({ style, ...rest }) {
260
return (
261
<div
262
className={styles.InnerElementType}
286
- onFocus={handleFocus}
287
- onKeyPress={handleKeyPress}
263
style={{
264
...style,
265
display: 'inline-block',
@@ -292,7 +267,6 @@ function InnerElementType({ style, ...rest }) {
267
width: undefined,
268
}}
269
ref={divRef}
295
- tabIndex={0}
270
{...rest}
271
/>
272
);