title: React prevent onClick firing when onFocus fires
body: <p>My field onClick event toggles a dropdown, the onFocus event opens it.<br>
  When the onFocus event is fired the onClick event is fired afterwards and closes the newly opened dropdown. 
  How can I prevent firing on Click in Case onFocus fired?   </p>
  
  <p>preventDefault and stopPropagation do not work, both events are always fired</p>
  
  <pre><code>&lt;TextInputV2
    label={label}
    onChange={handleInputOnChange}
    onClick={handleOnClick}
    onFocus={handleOnFocus}
    onKeyUp={handleInputOnKeyUp}
    readOnly={!searchable}
    value={inputValue}
  /&gt;
  </code></pre>
  
  <p>.......</p>
  
  <pre><code>  const handleOnFocus = (event: React.FocusEvent): void =&gt; {
      if (!isOpen) {
        changeIsOpen(true)
      }
    }
  
    const handleOnClick = (event: React.SyntheticEvent): void =&gt; {
      if (!searchable) {
        toggleOpen()
      }
    }
  </code></pre>