Display glitch in Search component

[jmeurice]

There is an edge case in the Search component:

• Enter some whitespace in the search with expandable=true
• Blur the Search (focus something else or using JS)
• The Search collapses but the clear button stays visible.

Screenshot:

This is due to the fact that the visibility of the clear button is decided by value === '':

https://github.com/carbon-design-system/carbon-components-svelte/blob/ba27830b2f6ad1fb2c8cc7dc1a8c833cf9e236d0/src/Search/Search.svelte#L162-L162

However the search is collapsed when the trimmed value is empty:

https://github.com/carbon-design-system/carbon-components-svelte/blob/ba27830b2f6ad1fb2c8cc7dc1a8c833cf9e236d0/src/Search/Search.svelte#L142-L146

Possible fixes:

• Do not collapse when the value is whitespace only.
• On blur, clear the value if it's whitespace only. However this mutates the user input, which could be whitespace intentionally.
• Hide the clear button when expanded is false. Again this might hide the search when the contained value is whitespace.

The first version sounds the most consistent with API to me. Users can choose to clear the value if its empty on blur manually.

I can do a PR if this sounds good.

[metonym]

Yes – PRs always welcome.