SearchBox input should receive focus after clearing

[petermakowski]

Related to canonical/maas.io#463

Steps to reproduce

1. Open https://canonical.github.io/react-components/?path=/story/searchbox--external-state
2. Focus the search field.
3. Click the clear button.

What actually happens

Any text you start entering will be lost, because the search field is no longer focused.

What should happen

The text you enter appears in the search field because it's automatically focused.

[huwshimi]

I'm not sure if this is possible, but it might be nice if this only restored the focus to the input if the input had focus when the clear button was clicked. This might be better for MAAS and JAAS-dashboard where the clear button is more of a "clear current filters" action that can done somewhat independently of typing searches. This might be especially true for the search and filter pattern used in JAAS (and soon to be used in MAAS) where focusing on the search input opens up a panel.

[petermakowski]

it might be nice if this only restored the focus to the input if the input had focus when the clear button was clicked.

This is possible, but I'm not sure it's a good idea - if you're using keyboard instead of mouse, the input field will never be focused while you press the clear button.

[bartaz]

This is possible, but I'm not sure it's a good idea - if you're using keyboard instead of mouse, the input field will never be focused while you press the clear button.

Even if you are using a mouse I think as soon as you click focus will move to the button.

[bartaz]

It seems it may have to be an optional prop? Because in cases when it is a purely text search box, you probably want to focus it after clearing. But if it is a search&filter pattern which has more interactive functionality on focus, clearing likely means "get rid of everything and close the dropdown" - so we don't want to focus back.

So SearchBox (meant for text search functionality) could have focus on clearing by default, but if it is reused in other components we may need an option for opt-out disabling of this.

[petermakowski]

It seems it may have to be an optional prop?

Good idea, updated the PR and added shouldRefocusAfterReset prop which has a false value by default.