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>

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

@@ -8,8 +8,6 @@
  */
 
 import React, {Fragment, useRef} from 'react';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
 import styles from './EditableValue.css';
 import {useEditableValue} from '../hooks';
 
@@ -51,9 +49,7 @@ export default function EditableValue({
 
  switch (event.key) {
  case 'Enter':
- if (isValid && hasPendingChanges) {
- overrideValueFn(path, parsedValue);
- }
+ applyChanges();
  break;
  case 'Escape':
  reset();
@@ -63,6 +59,12 @@ export default function EditableValue({
  }
  };
 
+ const applyChanges = () => {
+ if (isValid && hasPendingChanges) {
+ overrideValueFn(path, parsedValue);
+ }
+ };
+
  let placeholder = '';
  if (editableValue === undefined) {
  placeholder = '(undefined)';
@@ -75,21 +77,14 @@ export default function EditableValue({
  <input
  autoComplete="new-password"
  className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
+ onBlur={applyChanges}
  onChange={handleChange}
  onKeyDown={handleKeyDown}
  placeholder={placeholder}
  ref={inputRef}
  type="text"
  value={editableValue}
  />
- {hasPendingChanges && (
- <Button
- className={styles.ResetButton}
- onClick={reset}
- title="Reset value">
- <ButtonIcon type="undo" />
- </Button>
- )}
  </Fragment>
  );
 }