Update input field border on focus

7 years ago · 8245bf010e
parent c4e75a7075
commit 8245bf010e
1 changed files with 3 additions and 1 deletions
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@ -31,6 +31,7 @@ const styles = {
    },
  },
  formLabelFocused: {},
+  inputFocused: {},
  inputRoot: {
    'label + &': {
      marginTop: '8px',
@ -41,7 +42,7 @@ const styles = {
    padding: '0 16px',
    display: 'flex',
    alignItems: 'center',
-    '&:focus': {
+    '&$inputFocused': {
      border: '1px solid #2f9ae0',
    },
  },
@ -89,6 +90,7 @@ class TextField extends Component {
            root: material ? '' : classes.inputRoot,
            input: material ? '' : classes.input,
            underline: material ? classes.materialUnderline : '',
+            focused: material ? '' : classes.inputFocused,
          },
        }}
        {...textFieldProps}