Blur event: do not blur if click occurs within element

Question

I have a component that looks as follows, visually.

Here is a simplified codepen recreation .

The main problem comes in here:

<div className={styles.colorPicker}>
  <input
    readOnly
    type="text"
    value={color}
    onFocus={this.showColorPalette}
    onBlur={this.hideColorPalette}
  />
  <Palette
    color={color}
    onSelect={this.selectColor}
  />
</div>

The intended behavior is that, when they blur the component, the color palette should hide. however , if they clicked on something in the color palette, it should not hide the palette.

Because clicking on the color palette will blur the input, it will hide the palette. I can't find a way to reconcile the palette's onClick method with the input's onBlur method in such a way that one overrides the other.

Is there a way to do this in react?

Answer 1

just tried something using onMouseEnter and onMousLeave to conditionally trigger blur() . By this the color pallette will be visible for picking color and will be blurred when the color is picked or click outside the input box.

Check the updatde pen

http://codepen.io/pranesh-r/pen/EgoaGK?editors=0110