Blur event: do not blur if click occurs within element
<p>I have a component that looks as follows, visually.</p>

<p><a href="https://i.stack.imgur.com/qo7Pw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qo7Pw.png" alt="Basic Color Picker Component"></a></p>

<p><a href="http://codepen.io/AlexFrazer/pen/VKAqRA?editors=0110" rel="nofollow noreferrer">Here is a simplified codepen recreation</a>.</p>

<p>The main problem comes in here:</p>

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

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

<p>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 <code>onClick</code> method with the input's <code>onBlur</code> method in such a way that one overrides the other.</p>

<p>Is there a way to do this in react?</p>