How to autofocus an input field in semantic-ui-react?

Question

I'm having a difficult time autofocusing an input field with semantic-ui-react. The documentation doesn't seem to include an autoFocus prop and the focus prop doesn't place the cursor inside the input field as would be expected.

<Form onSubmit={this.handleFormSubmit}>
  <Form.Field>
    <Form.Input
      onChange={e => this.setState({ username: e.target.value })}
      placeholder='Enter your username'
      fluid />
  </Form.Field>
</Form>

EDIT: This code works:

<Form onSubmit={this.handleFormSubmit}>
  <Form.Input
    onChange={e => this.setState({ username: e.target.value })}
    placeholder="Enter your username"
    autoFocus
    fluid />
</Form>

Answer 1

The focus prop is purely to add a focus effect on the input's appareance, it does not actually set the focus.

Any props unused by Semantic are passed down to the DOM element, so if you set an autoFocus prop, it should go down to the input.

However, as explained in the Form documentation:

Form.Input

Sugar for <Form.Field control={Input} />.

So your code should rather be:

const yourForm = (
  <Form onSubmit={this.handleFormSubmit}>
    <Form.Input
      onChange={e => this.setState({ username: e.target.value })}
      onSelect={() => this.setState({ usernameErr: false })}
      placeholder="Enter your username"
      error={usernameErr}
      iconPosition="left"
      name="username"
      size="large"
      icon="user"
      fluid
      autoFocus
    />
  </Form>
)

Note that this only works if you want the focus to happen right when the wrapper component is mounted. If you want to focus the input after it has been mounted, you have to use a ref and call the focus() method on it, just as showed in the documentation, like so:

class InputExampleRefFocus extends Component {
  handleRef = (c) => {
    this.inputRef = c
  }

  focus = () => {
    this.inputRef.focus()
  }

  render() {
    return (
      <div>
        <Button content='focus' onClick={this.focus} />
        <Input ref={this.handleRef} placeholder='Search...' />
      </div>
    )
  }
}

Hope that helps!

Answer 2

In order to tell the input field to focus, you need to create a reference (ref) to the input field as follows:

import React, { useState, useRef } from 'react';
import { Input, Button } from 'semantic-ui-react';

const SearchInputExample = () => {
  const [searchValue, setSearchValue] = useState('');

  // Create reference to the input field
  const searchRef = useRef(null);

  const handleSearchValueChange = event => setSearchValue(event.target.value);

  return (
    <div>
      <Input
        placeholder="Search..."
        // Assign the ref created to a ref attribute
        ref={searchRef}
        value={searchValue}
        onChange={handleSearchValueChange}
      />
      <Button
        onClick={() => {
          setSearchValue('');
          // Use the ref assigned to put the focus inside the input
          searchRef.current.focus();
        }}
      >
        Clear search (and focus)
      </Button>
    </div>
  );
};

export default SearchInputExample;

You can read more about the useRef() hook here

Answer 3

I would have assumed that semantic UI would pass all unknown props to the root element, the input. So if it does, you should be able to add the autoFocus attribute to it, if not, you will have to control which input is being focused in your state.

<Input placeholder='Search...' focus={this.state.focusedElement === "search"}/>