From 74866a6efb11a3633edfc2bb951b2a029118cd30 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 11 Nov 2020 12:00:12 -0600
Subject: [PATCH] Make editable actoin item a button, autofocus input contents

---
 .../ui/editable-label/editable-label.js       | 27 ++++++++++---------
 .../components/ui/editable-label/index.scss   |  3 ++-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/ui/app/components/ui/editable-label/editable-label.js b/ui/app/components/ui/editable-label/editable-label.js
index e082082b1..12ce68a7b 100644
--- a/ui/app/components/ui/editable-label/editable-label.js
+++ b/ui/app/components/ui/editable-label/editable-label.js
@@ -45,13 +45,15 @@ class EditableLabel extends Component {
         className={classnames('large-input', 'editable-label__input', {
           'editable-label__input--error': value === '',
         })}
+        autoFocus
       />,
-      <div className="editable-label__icon-wrapper" key={2}>
-        <i
-          className="fa fa-check editable-label__icon"
-          onClick={() => this.handleSubmit()}
-        />
-      </div>,
+      <button
+        className="editable-label__icon-button"
+        key={2}
+        onClick={() => this.handleSubmit()}
+      >
+        <i className="fa fa-check editable-label__icon" />
+      </button>,
     ]
   }
 
@@ -60,12 +62,13 @@ class EditableLabel extends Component {
       <div key={1} className="editable-label__value">
         {this.state.value}
       </div>,
-      <div key={2} className="editable-label__icon-wrapper">
-        <i
-          className="fas fa-pencil-alt editable-label__icon"
-          onClick={() => this.setState({ isEditing: true })}
-        />
-      </div>,
+      <button
+        key={2}
+        className="editable-label__icon-button"
+        onClick={() => this.setState({ isEditing: true })}
+      >
+        <i className="fas fa-pencil-alt editable-label__icon" />
+      </button>,
     ]
   }
 
diff --git a/ui/app/components/ui/editable-label/index.scss b/ui/app/components/ui/editable-label/index.scss
index fdb430c7d..23c5df4a2 100644
--- a/ui/app/components/ui/editable-label/index.scss
+++ b/ui/app/components/ui/editable-label/index.scss
@@ -23,10 +23,11 @@
     }
   }
 
-  &__icon-wrapper {
+  &__icon-button {
     position: absolute;
     margin-left: 10px;
     left: 100%;
+    background: unset;
   }
 
   &__icon {