Merge pull request #9855 from darkwing/edit-account-focus

Make editable action item a button, autofocus input contents

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}>
+      <button
-        <i
+        className="editable-label__icon-button"
-          className="fa fa-check editable-label__icon"
+        key={2}
         onClick={() => this.handleSubmit()}
-        />
+      >
-      </div>,
+        <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">
+      <button
-        <i
+        key={2}
-          className="fas fa-pencil-alt editable-label__icon"
+        className="editable-label__icon-button"
         onClick={() => this.setState({ isEditing: true })}
-        />
+      >
-      </div>,
+        <i className="fas fa-pencil-alt editable-label__icon" />
+      </button>,
     ]
   }
 

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 {