apply changes on editablevalue on blur feature implemented

Author: Murat Çatal

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

@@ -51,9 +51,7 @@ export default function EditableValue({
 
     switch (event.key) {
       case 'Enter':
-        if (isValid && hasPendingChanges) {
-          overrideValueFn(path, parsedValue);
-        }
+        applyChanges();
         break;
       case 'Escape':
         reset();
@@ -63,6 +61,17 @@ export default function EditableValue({
     }
   };
 
+  const handleBlur = event => {
+    event.stopPropagation();
+    applyChanges();
+  };
+
+  const applyChanges = () => {
+    if (isValid && hasPendingChanges) {
+      overrideValueFn(path, parsedValue);
+    }
+  };
+
   let placeholder = '';
   if (editableValue === undefined) {
     placeholder = '(undefined)';
@@ -77,6 +86,7 @@ export default function EditableValue({
         className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
         placeholder={placeholder}
         ref={inputRef}
         type="text"