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>

Author: muratcatal

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>
   );
 }