Focus and expand the select list

[approots]

When I focus the component instance (this.refs.mySelectList.focus()), the list will focus but not expand. Is there a way to also expand the list programatically?

[jurgob]

+1

[thebillg]

+1

[olwen1987]

I figured out the solution for this. We need to set the this._openAfterFocus = true in the focus() method of select.js

[bjoernm]

+1, would be great to merge the solution of @olwen1987

[bjoernm]

Is there a reason the solution of @olwen1987 is not being merged into master?

[panetta-net-au]

The focus function is a little different now. I'm looking at version 1.0.0-beta12 and it references the property "openAfterFocus" to determine if focus() should open the drop down when focus() is called.

Try setting the openAfterFocus (not openOnFocus) prop to "true" and see if that has an effect. It still doesn't work for me but that could be due to Redux Form (I'm still investigating but might put it on the backburner for a bit).

[panetta-net-au]

After more testing, I've decided that openAfterFocus works fine on 1.0.0-beta12 if you click on the Select Control. However, if the Select Control receives focus via clicking a label (with a ref) or by pressing tab, then it does not open the menu. Depending on what you're going for UX-wise, this might actually be the desired functionality.

To make the menu respect the openAfterFocus for any type of focusing, the Select control needs to be modified or monkey-patched.

If you really want to monkey patch it, you can put this code in your Component that contains the Select Component.
Note that this._reactSelectRef refers to the Select Component
All I've done is include || this.props.openAfterFocus for the isOpen check.

  //HACK: Awful awful monkeypatching so that the handleInputFocus method respects the openAfterFocus property
  componentDidMount() {          
      var handleInputFocusMonkey = function(event) {
          var isOpen = this.state.isOpen || this._openAfterFocus || this.props.openAfterFocus;
          if (this.props.onFocus) {
              this.props.onFocus(event);
          }
          this.setState({
              isFocused: true,
              isOpen: isOpen
          });
          this._openAfterFocus = false;
      };

      this._reactSelectRef.handleInputFocus = handleInputFocusMonkey.bind(this._reactSelectRef);
  }

There might be a better way to do this but with my limited understanding of the code, it seems to work all right.

[Laurentvw]

Here's my awful hack to keep the select list open at all times, except when a value is selected (with ref="selectTags"):

componentDidMount() {
    var componentWillUpdateHack = function(nextProps, nextState) {
        if (!nextProps.value && (nextState.isOpen !== this.state.isOpen || !this.state.isOpen)) {
            nextState.isOpen = true;
        }
    }
    this.refs.selectTags.componentWillUpdate = componentWillUpdateHack.bind(this.refs.selectTags);
    if (!this.refs.selectTags.props.value) this.refs.selectTags.setState({isOpen: true});
}

[jkillian]

Could someone clarify the difference between the openAfterFocus and openOnFocus props? They seem to have a similar function to me at first glance?

[panetta-net-au]

@jkillian
It looks like the code has changed in the short time since I posted my reply to this.

Glancing at the code, it seems like openOnFocus will now do what I tried to monkey patch however you might have to set both openAfterFocus as well as openOnFocus to true for this to work (though check both parameters are available in the version you're using)
https://github.com/JedWatson/react-select/blob/4420eaf09f5441bcdd27a13406832c831d8ab1e6/lib/Select.js

So I guess at the moment, openOnFocus is like "openOnAnyTypeOfFocus" or "alwaysOpenOnFocus" and openAfterFocus is like "openAfterClickToFocus"

You might need to experiment/debug to clarify as I haven't had a chance to do that with the new code.

[jkillian]

Thanks for the answer @panetta-net-au! If I encounter anything different in trying it out I'll respond here. Now just wish there was an alwaysStayOpen prop or something

[jkillian]

Also, I think the openOnFocus prop fixes this so this issue can potentially be closed @approots

[nealoke]

Yep openOnFocus works for me, the only thing is that in the docs it says that it needs searchable={true}, but it works fine without 💃

[danielkcz]

I just want to note here that behavior is quite opposite right now (v1.2.1). Even with openAfterFocus and openOnFocus both false it open menu on focus :) But I guess with version 2 in the works, it's not that relevant anymore.

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples