From cddde45806a8e37f534742a280fa18be79871d18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Murat=20=C3=87ATAL?= <muratcatal@outlook.com>
Date: Tue, 4 Feb 2020 22:05:01 +0300
Subject: [PATCH] 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>
---
 .../views/Components/EditableValue.js         | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index 992f2b2dff658..e501c39adee04 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/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,6 +77,7 @@ export default function EditableValue({
       <input
         autoComplete="new-password"
         className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
+        onBlur={applyChanges}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
@@ -82,14 +85,6 @@ export default function EditableValue({
         type="text"
         value={editableValue}
       />
-      {hasPendingChanges && (
-        <Button
-          className={styles.ResetButton}
-          onClick={reset}
-          title="Reset value">
-          <ButtonIcon type="undo" />
-        </Button>
-      )}
     </Fragment>
   );
 }