GridSearch component fixes

GridSearch.txt

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:

1) User clicks outside of input and NOT on the icon -> blur triggers, input closes (OK)
2) User clicks on the search icon -> blur triggers, input closes, click triggers, input opens (BUG - INPUT CLOSES AND OPENS)
3) User clicks on the clear icon -> blur triggers, click doesn't trigger (BUG - INFO NOT CLEARED)

Fixes:
2) Change search icon clickEvent to mousedownEvent and, knowing the mouseDown event triggers before blur, we can control the
order by which the two handler methods are called (setFocus(mouseDown) and removeFocus(blur)).
So, the solution was achieved by building a simple semaphore, like so:

state = { focus: false, wasBlurred: false };

setFocus() { // triggered everytime the user clicks on the search icon (mousedown)
		if (this.state.wasBlurred) { 
			this.setState({ focus: true, wasBlurred: false }); // invert the "semaphore"
		} else {
			this.setState({ focus: true }); // was clicked on the first time, we just need to open
		}
	}
  
 removeFocus() { // triggered everytime the user clicks outside the input (blur)
		if (!this.state.wasBlurred) {
			this.setState({ wasBlurred: true }); // simple blur, search icon was not clicked
		} else {
			this.setState({ focus: false, wasBlurred: true }); // invert the "semaphore", search icon was clicked
		}
	}


3) Change clear icon clickEvent to mousedownEvent, and, knowing the mouseDown event triggers before blur, it will clear
the input, then blur is triggered which closes the input (OK)