React-select: [v2] with openMenuOnClick: false and openMenuOnFocus: false, menu still toggles on click

[xxx]

continuing to stuggle with the upgrade, and seeing this.

We're using react-select to show results for typeahead search, so I only ever want the menu to be showing when there are results to list. I tried setting both openMenuOnClick and openMenuOnFocus to false, but the menu continues to come up (with no results) when clicking inside of the input.

I expect the menu to never, ever show up when the user clicks in the input, or any parts of the input when these settings are set to false.

[7DeGe]

I have the same problem. Did you find a solution to that problem?

[Korkemoms]

You can hack it by overwriting the onControlMouseDown method:

handleRef = node => {
    this.reactSelectRef = node;

    // fix openMenuOnClick so it does what it should do

    if (node) {
      const select = node.select;
      select.onControlMouseDown = event => {
        const { openMenuOnClick } = select.props;
        if (!select.state.isFocused) {
          if (openMenuOnClick) {
            select.openAfterFocus = true;
          }
          select.focusInput();
        } else if (!select.props.menuIsOpen) {

          // only added this if
          if (openMenuOnClick) {
            select.openMenu("first");
          }

          //select.openMenu("first");
        } else {
          select.onMenuClose();
        }

        if (event.target.tagName !== "INPUT") {
          event.preventDefault();
        }
      };
    }
  };

[avernikoz]

Hey, I have the same problem.
Related issues:
https://github.com/JedWatson/react-select/issues/1131
https://github.com/JedWatson/react-select/issues/2127
https://github.com/JedWatson/react-select/pull/2165

[avernikoz]

@Korkemoms Can you provide your full solution?
Thanks in advance.

[Korkemoms]

I copied the below function from ReactSelect's souce code and modified (1) and (2) below. Then using ref I replace the function with my modified one.

<ReactSelect ref={node => {
    if (node) {
      const select = node.select;
      select.onControlMouseDown = event => {
        const { openMenuOnClick } = select.props;
        if (!select.state.isFocused) {
          if (openMenuOnClick) {
            select.openAfterFocus = true;
          }
          select.focusInput();
        } else if (!select.props.menuIsOpen) {

          // i added this if statement  (1)
          if (openMenuOnClick) {
            select.openMenu("first");
          }

           // i removed this statement (2)
          //select.openMenu("first");
        } else {
          select.onMenuClose();
        }
        if (event.target.tagName !== "INPUT") {
          event.preventDefault();
        }
      };
    }
  }} />

[tpict]

@Korkemoms thanks for sharing your solution 😄 would you like to open a PR for it?

[rscotten]

@tpict

Here's the PR using @Korkemoms's fix: #3334