Searchbox: Clicking in front of input text puts cursor at the start of the text

[lynamemi]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ npm run change

Description of changes

We received feedback from one of our partners that after entering text in the search input field, it's hard to get the cursor back to the beginning of the text.

To solve this, any clicks on the element before the input field move the cursor to the beginning of the text.

Focus areas to test

(optional)

[manishgarg1]

@micahgodbolt, can you please review this. I am not able to conclude if this the best way to make this fix.

[lynamemi]

Me neither! Definitely open to alternatives for making it easier to position the cursor at the start.

[micahgodbolt]

what if that was put onto the icon 'onClick'. i.e. after you mouse away from search the icon comes back....there's a TON of space to click....but it doesn't do anything. You even get an I beam to as cursor.

probably change it to an icon button with onClick handler.

[lynamemi]

@micahgodbolt I explored putting the onClick on the Icon and on an IconButton. I landed on keeping the onClick handler on the icon container. See new gif above in description and reasoning below:

Icon: I found that by putting the onclick on the icon container, instead of the Icon, this allows the text cursor to move seamlessly between the icon area and text. Giving only the icon the click creates a break in experience.

IconButton: I tried plugging in an IconButton in place of the Icon, but there will be a lot of different interactive states that we would need to override. I figure if we can avoid that, that would be good.

[micahgodbolt]

@lynamemi ok good, that's perfect. I think I misunderstood your original intention. I'm glad that clicking inside of the input captures that onClick. I was afraid that ANY click would send you to the beginning. This works great.

[lynamemi]

Ok cool! Glad we're on the same page!