React-color: Unable to select hex input

[scottbarrow]

I have setup a colorpicker with a swatch and popover as per the demo
The colour selector and the color presets are able to be clicked, however the hex input cannot.
This only occurs when the popover is in use.

This can be replicated on the http://casesandberg.github.io/react-color/ demo page
Replicate:

• Select the color swatch to open the colorpicker
• Attempt to select the hex input

Expected:

• To be able to select and input a hex color

Actual

• Colorpicker closes, unable to select input.

If the popover element is deleted from the DOM, the input can be selected.
I suspect his is an ordering z-index issue

[jeremyadavis]

Hit this issue as well. I put my fix into PR #180 if it helps you and others as well.

[scottbarrow]

awesome, thanks

[willbreitkreutz]

@jeremyadavis good catch, I was scratching my head on that one over something pretty simple.
@casesandberg thanks for this component, it's awesome!

[Gervwyk]

Any updates / workaround on this issue? having the save trouble..

[casesandberg]

Looks like you just need to wrap the picker in a div with a higher z-index!

[m90]

FWIW here are my 2 cents on how to solve this:

Applying an even higher z-index on the wrapper is not really solving the root cause which is the fact that the div wrapping the input is not generating any stacking context due to a lacking positioning value.

I "fixed" it using

.sketch-picker > div > div {
    position: relative;
}

where .sketch-picker wraps the component.

If you'd be up for a PR, I'd be happy to fix it that way in-library.