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