SearchField requires 2 clicks to interact with its IconButtons (clear/search) when input is focused

[adamstankiewicz]

Improvements

The SearchField component allows users to type into an input field and then click one of two conditional icon buttons:

• Clear. Resets the input to be empty.
• Submit. Submits the current value in the input.

However, when the user has focus in the input field, it requires 2 clicks for the user to actually click the icon button. The first seemingly removes focus from the input field and makes the icon button hoverable; the second click works as expected.

From a usability/a11y POV, it should not require 2 clicks for a user to interact with one of the icon buttons in the search field.