How to prevent the menu from opening on click?

[rooskienz]

Hi,

When I click on the input the menu opens but I only want it to open when user starts typing and there are matching options. How do I do that?

Cheers!

[gojohnnygo]

@rooskienz - Calling focus() has the pleasant side effect of closing the menu. Calling that onClick may do the trick.

// pseudo code
<span onClick=this.Select.focus()>
  <Select
    ref={(ref) => this.Select = ref}
  />
</span>

[morgs32]

This is throwing an error for me. Calling focus on undefined.

[gojohnnygo]

@morgs32 sounds like you don't have a ref to the react-select component.

[elghali]

@morgs32
SelectFocus = () => { this.Select.focus() }... ... <span onClick=this.SelectFocus()> <Select ref={(ref) => this.Select = ref} /> </span>
but still, the problem remains

[morgs32]

@elghali Yea I don't know why @gojohnnygo thinks that'll work.
I had to fork this and make the changes myself:
https://github.com/morgs32/react-select/commit/554fea70c5af102cab116c48fc09be1758384cad#diff-04191649796841200b33375bdff7c78f

Looking at the code, it seems that when Select is focused, it is sure to have an open menu.

[elghali]

I wrapped the Select comp within a span which doesn't allow it to open and it works, but the problem is that now even when the arrow is clicked it won't open either,

     dontOpenOnClick = () => {
    this.conditionSelector.select.closeMenu();
  }
   <span onFocus={this.dontOpenOnClick}>
                <Select.Creatable
                  ref={(node) => this.conditionSelector = node}
                />
   </span>

[boonya]

There is special option openMenuOnClick={false}

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!