Restore input focus after clicking reset value button
Brian Vaughn committed
Feb 21, 2019 at 14:13 UTC
9898db02d1029d35dfd67a9afb91ca11971bf086
1 file changed
+7
-1
src/devtools/views/InspectedElementTree.js
+7
-1
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import React, { Fragment, useCallback, useState } from 'react';
3
+import React, { Fragment, useCallback, useRef, useState } from 'react';
4
import Button from './Button';
5
import ButtonIcon from './ButtonIcon';
6
import { getMetaValueLabel } from './utils';
@@ -175,6 +175,7 @@ export function EditableValue({
175
}: EditableValueProps) {
176
const [hasPendingChanges, setHasPendingChanges] = useState(false);
177
const [editableValue, setEditableValue] = useState(value);
178
+ const inputRef = useRef<HTMLInputElement | null>(null);
179
180
if (hasPendingChanges && editableValue === value) {
181
setHasPendingChanges(false);
@@ -198,6 +199,10 @@ export function EditableValue({
199
const handleReset = useCallback(() => {
200
setEditableValue(value);
201
setHasPendingChanges(false);
202
+
203
+ if (inputRef.current !== null) {
204
+ inputRef.current.focus();
205
+ }
206
}, [value]);
207
208
const handleKeyDown = useCallback(
@@ -242,6 +247,7 @@ export function EditableValue({
247
className={styles.ValueInput}
248
onChange={handleChange}
249
onKeyDown={handleKeyDown}
250
+ ref={inputRef}
251
type={type}
252
value={dataType === 'boolean' ? undefined : inputValue}
253
/>