Merge pull request #990 from Shopify/985-textfield-focus

[TextField] Fix `focused` prop so it triggers focus state

UNRELEASED.md

@@ -14,6 +14,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed the `focused` prop on `TextField` so it sets the focus state ([#990](https://github.com/Shopify/polaris-react/pull/990))
 - Resolved an unsupported `React.Fragment` syntax ([#1080](https://github.com/Shopify/polaris-react/pull/1080))
 - Constrained `DropZone` height based on inherited wrapper height [#908](https://github.com/Shopify/polaris-react/pull/908)
 

src/components/TextField/TextField.tsx

@@ -133,18 +133,26 @@ class TextField extends React.PureComponent<CombinedProps, State> {
 
     this.state = {
       height: null,
-      focus: false,
+      focus: props.focused || false,
       id: props.id || getUniqueID(),
     };
   }
 
-  componentDidUpdate({focused}: CombinedProps) {
-    if (
-      this.input &&
-      focused !== this.props.focused &&
-      this.props.focused === true
-    ) {
+  componentDidMount() {
+    if (!this.props.focused) {
+      return;
+    }
+
+    this.input.focus();
+  }
+
+  componentDidUpdate({focused: wasFocused}: CombinedProps) {
+    const {focused} = this.props;
+
+    if (!wasFocused && focused) {
       this.input.focus();
+    } else if (wasFocused && !focused) {
+      this.input.blur();
     }
   }
 

src/components/TextField/tests/TextField.test.tsx

@@ -58,16 +58,6 @@ describe('<TextField />', () => {
     expect(input.prop('prefix')).toBeUndefined();
   });
 
-  it('focuses input and calls onFocus() when focused prop has been updated to true', () => {
-    const element = mountWithAppProvider(
-      <TextField label="TextField" onChange={noop} />,
-    );
-    element.setProps({focused: true});
-    expect(element.getDOMNode().querySelector('input')).toBe(
-      document.activeElement,
-    );
-  });
-
   describe('onChange()', () => {
     it('is called with the new value', () => {
       const spy = jest.fn();
@@ -143,6 +133,42 @@ describe('<TextField />', () => {
     });
   });
 
+  describe('focused', () => {
+    it('input is in focus state if focused is true', () => {
+      const element = mountWithAppProvider(
+        <TextField label="TextField" onChange={noop} focused />,
+      );
+
+      expect(element.getDOMNode().querySelector('input')).toBe(
+        document.activeElement,
+      );
+    });
+
+    it('focuses input if focused is toggled', () => {
+      const element = mountWithAppProvider(
+        <TextField label="TextField" onChange={noop} />,
+      );
+
+      element.setProps({focused: true});
+
+      expect(element.getDOMNode().querySelector('input')).toBe(
+        document.activeElement,
+      );
+    });
+
+    it('blurs input if focused is toggled', () => {
+      const element = mountWithAppProvider(
+        <TextField label="TextField" onChange={noop} focused />,
+      );
+
+      element.setProps({focused: false});
+
+      expect(element.getDOMNode().querySelector('input')).not.toBe(
+        document.activeElement,
+      );
+    });
+  });
+
   describe('autoComplete', () => {
     it('defaults to no autoComplete attribute', () => {
       const textField = shallowWithAppProvider(