Search code examples
dropdownautofocussemantic-ui-react

Howto have a Semantic UI React Dropdown auto-focus when its parent component mounts?

I am using Semantic React UI's Dropdown, and I would like it to have focus as soon as its parent component mounts: the user should be able to search immediately.

I tried using a ref in render() of the parent:

<Dropdown ref={dd => (this.MyDropdown = dd)}
        ... />

...and then calling focus on it in the componentDidMount function of the parent component. But the Dropdown has no function focus, so this method won't work.

componentDidMount() {
    // I want to do something like the next line here, but 'focus' is not available on the component.
    //this.MyDropdown.focus();
  }

So what should I do instead?

Here is what I tried so far at codesandbox. Note the commented-out line in componentDidMount.

Solution

  • Try this:

    <Dropdown searchInput={{ autoFocus: true }} />

    After modification, your code will look like this

    <Dropdown
    ref={dd => (this.MyDropdown = dd)}
    placeholder="Please type something, dude"
    fluid
    search
    selection
    options={options}
    searchInput={{ autoFocus: true }}
  />

    References: