Merge pull request #9 from materialr/feature/autofocus

feat: add focus method on input field

src/index.jsx

@@ -13,8 +13,10 @@ class TextField extends React.Component {
     super(props);
     this.state = { helperTextControlsId: uuidv1(), id: uuidv1() };
     this.elementIcon = undefined;
+    this.elementField = undefined;
     this.elementRoot = undefined;
     this.textField = undefined;
+    this.focus = this.focus.bind(this);
     this.getClassNames = this.getClassNames.bind(this);
     this.getClassNamesFloatingLabel = this.getClassNamesFloatingLabel.bind(this);
     this.getClassNamesHelperText = this.getClassNamesHelperText.bind(this);
@@ -86,6 +88,9 @@ class TextField extends React.Component {
   getId() {
     return this.props.id || this.state.id;
   }
+  focus() {
+    this.elementField.focus();
+  }
   hasFloatingLabel() {
     const { fullWidth } = this.props;
     return !fullWidth || this.isTextArea();
@@ -191,6 +196,7 @@ class TextField extends React.Component {
             onFocus={onFocus}
             onKeyUp={onKeyUp}
             placeholder={fullWidth ? label : undefined}
+            ref={(elementField) => { this.elementField = elementField; }}
             required={required}
             type={type}
             value={value}
@@ -212,6 +218,7 @@ class TextField extends React.Component {
               onDrop={onDrop}
               onFocus={onFocus}
               onKeyUp={onKeyUp}
+              ref={(elementField) => { this.elementField = elementField; }}
               required={required}
               rows={8}
               columns={40}

src/index.test.jsx

@@ -452,6 +452,31 @@ test('Reners the correct elements', () => {
   expect(actual).toBe(expected);
 });
 
+test('Focuses the input field', () => {
+  const focus = jest.fn();
+  const wrapper = mount(<TextField label={LABEL} />);
+  const instance = wrapper.instance();
+  const { elementField } = instance;
+  const expected = 1;
+  elementField.focus = focus;
+
+  instance.focus();
+  const actual = focus.mock.calls.length;
+
+  expect(actual).toBe(expected);
+});
+
+test('Reners the correct elements', () => {
+  const wrapper = mount(
+    <TextField box helperText="helperText" icon="icon" label={LABEL} type="textarea" />,
+  );
+  const expected = true;
+
+  const actual = wrapper.exists();
+
+  expect(actual).toBe(expected);
+});
+
 test('Adds extra properties that are passed in', () => {
   const DATA_QA = 'DATA_QA';
   const wrapper = shallow(