React-select: "Clicking" through options

[atatakobry]

Hello, I've found some UI/UX bug in your awesome react-select (exactly reproduce for v1.1.0+).

1. Select option in drop-down list
2. If "behind" this option some button is exist, then for a short time it becomes :active. For more understanding look at gif

Thank you!

[camlough]

+1 I see this problem on mobile devices.

[tiran133]

I have the same issue.
I solved it by overwriting the Options component there is where the issue lies.

https://github.com/JedWatson/react-select/blob/82910d9225f7aff73ac5052da9dc1e7f52f13de7/src/Option.js#L73

The select is handled on a mouse down event. Even though the event has a stopPropagation.
The "button" underneath registers a mouse up event.

I simply copied the whole https://github.com/JedWatson/react-select/blob/82910d9225f7aff73ac5052da9dc1e7f52f13de7/src/Option.js
Component created my own with an onMouseUp event instead of onMouseDown

...
<div className={className}
                style={option.style}
                role="option"
                aria-label={option.label}
                onMouseUp={this.handleMouseUp}
                onMouseEnter={this.handleMouseEnter}
                onMouseMove={this.handleMouseMove}
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}
                id={instancePrefix + '-option-' + optionIndex}
                title={option.title}>
                {this.props.children}
            </div>
...

In my main component I import the new Option component and give it the Select as a prop

<Select
....
              optionComponent={Option}
                    />

[mhxbe]

Duplicate of https://github.com/JedWatson/react-select/issues/532

[mhxbe]

What worked for me is playing with the z-index on .Select-menu-outer e.g.:

.Select-menu-outer {
  z-index: 5 !important;
}

[bladey]

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest 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.

If you feel this issue / pull request 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.