Internal issue 2758 - Searchable select issues clearing and displaying the selection

[ticket-sync[bot]]

Issues with searchable select field, see:

[https://design.sis.gov.uk/components/select/#searchable-single-select|https://design.sis.gov.uk/components/select/#searchable-single-select]

Expected behaviour

When manually deleting the last character of the search string, a current selection should be cleared - exactly the same as de-selecting the option or pressing the 'X'.

When the select field loses focus (tabbing or clicking elsewhere) whatever the current selection is should be displayed.

For a working example of this behaviour, see the [MUI Autocomplete component|https://mui.com/material-ui/react-autocomplete/].

Current behaviour

When manually deleting the last character of the search string the 'X' is hidden but the current selection remains.

When the select field loses focus (tabbing or clicking elsewhere), whatever the user left in the search string remains in the field.

This makes it possible to leave the field saying one thing, when the actual selection is something else entirely!

Steps to replicate

See attached.

[MI6-255]

Design to look how they want it to work, but there is an issue there with 2 issues, it is a breaking change

[MI6-255]

Design to start on this this week

[GCHQ-Developer-094]

Having reviewed these two separate issues, I have replicated the behaviours and agree with the suggested recommended changes.

Issue 1 - item still selected despite deleting search content. I believe this is a bug as we would not want this. The moment search string is edited it should de-select the choice previously made.

Issue 2 - user input remains when component unfocused or clicked out of. This is bad for validation, so I recommend using whatever has been selected to replace the user content, or if nothing selected should be populated with the dropdown placeholder text.

DEV NOTE: Potentially MUI has an example of the desired behaviour too