Cannot open dropdown after value was selected

I have found an issue which is not allow you to re-open dropdown after value selecting.

Create component <Select options={ ... } value={ ... } />. Add additional property to prevent dropdown resizing autosize={ false }. Click on the dropdown body -> select value -> try to click on the body again… Component is not opening anymore, cuz input took some size of component and this occupied area is not clickable anymore. You can re-open input by clicking on the arrow button, click out of component and click on the body again, click at some side of component (not at the middle).

Images (GIFs) are shown in related post: https://github.com/JedWatson/react-select/issues/1886 Codesandbox: https://codesandbox.io/s/qx4v3k2py

P.S. Temporary workaround is to add autoBlur to the component which do the same click outside.

[glambert]

Found a workaround for this in the mean time, in the CSS:

.has-value.is-pseudo-focused .Select-input {
  // Always show the input even on pseudo-focused. This fixes an issue
  // when `autosize` is set to `false`, an option is chosen, and we
  // try to re-open the menu by clicking on the current option.
  // The `opacity: 0;` below makes it that we can't click to open the
  // menu unless we focus out, or click on the "clear" or "arrow".
  // More on this here: https://github.com/JedWatson/react-select/issues/1887
  // opacity: 0;
}

Not the best as it always shows the blinking cursor even if its in pseudo-focused state, but we thought its much better than not being able to re-open the menu by clicking. Also, even in pseudo-focused mode you can type, so having the text cursor clearly shows the user he can still type to change the value.

I’ll keep an eye on this issue and if I have time try to find a fix and submit a PR.

[tudiantuan]

I use version “react-select”: “^2.3.0” is still cannot open dropdown after value was selected.