jpggvilaca

// Box.js
const Box = () => <div>Box</div>;

// SomeOtherComp.js
const SomeOtherComp = () => <div>Some other comp</div>;

// index.stories.js
import Box from './Box';
import SomeOtherComp from './SomeOtherComp';

jpggvilaca

{"lastUpload":"2018-07-12T14:21:28.144Z","extensionVersion":"v2.9.2"}

jpggvilaca

The confusion with this logic comes from the order that DOM events occur in conjunction with the HTML structure
of the component.

The DOM event order is: mousedown - blur - click.
The structure is: <searchIcon /> <input /> <clearIcon />.

Icons had a click handler, and the input had a blur handler.
When the input is closed it's trivial, the user clicks on the icon, the state changes, and the input opens.
The problem begins when the input is OPEN. So, there's a couple of scenarios here: