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 === '':

carbon-components-svelte/src/Search/Search.svelte

Line 162 in ba27830

class:bx--search-close--hidden="{value === ''}"

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

carbon-components-svelte/src/Search/Search.svelte

Lines 142 to 146 in ba27830

	on:blur="{() => {
	if (expanded && value.trim().length === 0) {
	expanded = false;
	}
	}}"

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.