apply changes on editablevalue on blur feature implemented (#17062)
* apply changes on editablevalue on blur feature implemented * Removed "Undo" button and unnecessary event.preventDefault() Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Murat ÇATAL committed
Feb 4, 2020 at 22:05 UTC
cddde45806a8e37f534742a280fa18be79871d18
1 file changed
+8
-13
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+8
-13
@@ -8,8 +8,6 @@
8
*/
9
10
import React, {Fragment, useRef} from 'react';
11
-import Button from '../Button';
12
-import ButtonIcon from '../ButtonIcon';
11
import styles from './EditableValue.css';
12
import {useEditableValue} from '../hooks';
13
@@ -51,9 +49,7 @@ export default function EditableValue({
49
50
switch (event.key) {
51
case 'Enter':
54
- if (isValid && hasPendingChanges) {
55
- overrideValueFn(path, parsedValue);
56
- }
52
+ applyChanges();
53
break;
54
case 'Escape':
55
reset();
@@ -63,6 +59,12 @@ export default function EditableValue({
59
}
60
};
61
62
+ const applyChanges = () => {
63
+ if (isValid && hasPendingChanges) {
64
+ overrideValueFn(path, parsedValue);
65
+ }
66
+ };
67
+
68
let placeholder = '';
69
if (editableValue === undefined) {
70
placeholder = '(undefined)';
@@ -75,6 +77,7 @@ export default function EditableValue({
77
<input
78
autoComplete="new-password"
79
className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
80
+ onBlur={applyChanges}
81
onChange={handleChange}
82
onKeyDown={handleKeyDown}
83
placeholder={placeholder}
@@ -82,14 +85,6 @@ export default function EditableValue({
85
type="text"
86
value={editableValue}
87
/>
85
- {hasPendingChanges && (
86
- <Button
87
- className={styles.ResetButton}
88
- onClick={reset}
89
- title="Reset value">
90
- <ButtonIcon type="undo" />
91
- </Button>
92
- )}
88
</Fragment>
89
);
90
}