How can I focus on a react-select component at will?

Question

Using react-select v2, I want to show and focus on the Select element when the user hits a certain key. Following are some things I've tried or paths I've gone down.

When I set a ref to the Select element and try to call .focus on it, it says no focus function is found. Perhaps I should somehow get a child element of it and then call focus on that?

There doesn't seem to be any prop I can pass that will trigger a focus function. There is an openOnFocus but not a focusOnOpen. The only thing I can think of would be to enable autoFocus and then somehow trigger a remount but there doesn't seem to be a simple way to do this and it feels hacky. Alternatively, I could enable just create the Select component each time the key is pressed instead of showing it, then unmount it instead of hiding it.

How can I properly get the react-select element to gain focus when I want it to?

I'm using a wrapper component around my component. Here's the render method for my wrapper:

  render() {
    return (
      <Select
        options={this.props.options}
        value={this.state.value}
        ref={this.selectRef}
      />
    );
  }

And here's where I'm calling that wrapper:

        <Wrapper
          options={this.props.labelOptions}
          ref={this.wrapperRef}
        />

I then try calling focus using either this.dropdownNode.focus() or this.dropdownNode.current.focus() and both say no focus method is found.

react-select has a focus function on it's ref, can you show us how you tried it? — Agney
– Agney, Commented Mar 23, 2019 at 3:56
@BoyWithSilverWings ah in that case it could be because I'm implementing a wrapper component over it. So I need to expose the focus function. I'll try that and then post code if it doesn't work. — Brady Dowling
– Brady Dowling, Commented Mar 23, 2019 at 11:49
Looks like the react-select autoFocus attribute is calling .focus() on the inputRef as seen here: github.com/JedWatson/react-select/blob/master/src/… — Brady Dowling
– Brady Dowling, Commented Mar 23, 2019 at 12:09

Brady Dowling · Accepted Answer · 2019-03-23 13:00:07Z

7

Because you're wrapping the Select component, you can't call Select's .focus() function from the ref you're giving to the wrapper. Since ref is a special kind of prop, the ref for that wrapper is only referring to Wrapper itself, not the component it wraps (Select).

To access the actual Select component's ref, you have to pass a ref down to it as a prop with a different, non-magic name, like innerRef (react-select code actually gives a good example of this as it's accessing the actual input element and focusing on that).

Here's the change that fixed it. Here is the wrapper component where Select is actually used (and it's taking in the ref passed to it):

  render() {
    return (
      <Select
        options={this.props.options}
        value={this.state.value}
        ref={this.props.innerRef}
      />
    );
  }

And here's the component that's calling that wrapper. In the constructor I'm creating the ref with this.selectRef = React.createRef() then I pass it in as a prop in this render method:

        <Wrapper
          options={this.props.labelOptions}
          innerRef={this.selectRef}
        />

Then I can call focus on the Select component itself by running this.selectRef.current.focus() anywhere I want to.

Notes: Thanks to BoyWithSilverWings answer. This question pertains to React 16.3. There is also a new React.ForwardRefs method but this way seems simpler to me.

edited Mar 23, 2019 at 13:00

answered Mar 23, 2019 at 12:52

Brady Dowling

5,6325 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mukesh210 Over a year ago

I am using React-select v2.4.4. Thing which worked for me was this.selectRef.focus(). Maybe it will be useful to someone someday.

jupiteror Over a year ago

Hi there, do you have a codesandbox example? I'm facing the same problem.

Collectives™ on Stack Overflow

How can I focus on a react-select component at will?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related