"Clicking" through options

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!

[mhxbe]

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

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

[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}
                    />