[Autocomplete] Set selected options on text change

WHY are these changes introduced?

When the text changes to match or no longer match one of the Autocomplete options, the checkmark is not added or removed from the list item. This behaviour was called it in a PR review and it turned out to be the same behaviour that was copied from the Polaris documentation.

I didn't change the examples that allow you to select multiple options ('with multiple tags' and 'with lazy loading') because it doesn't feel like the right UX and you can use the enter button to select the option.

I made this change in admin-web and now I'm following up to update the Polaris documentation

WHAT is this pull request doing?

This PR adds functionality to the applicable Autocomplete examples in the Polaris documentation. Specifically the examples will now select and add the checkmark to the list item when you type in an exact match into the input. It also removes the selection and checked on text change if the new value is no longer an exact match or the entire string was removed.

How to 🎩

Before

https://github.com/user-attachments/assets/c9ea8fc5-ade4-4544-9f9a-97b4c05cc298

After

https://github.com/user-attachments/assets/65c3b2d8-9ddb-464e-99e1-fef5bf6b89dd

When you type in an exact case-sensitive match to an existing list item, the list item becomes checked
- Changing the input to no longer be an exact match removes the checkmark
- Fully deleting the input value removes the checkmark

Examples

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

🎩 checklist

~[ ] Tested a snapshot~
[x] Tested on mobile
[x] Tested on multiple browsers
~[ ] Tested for accessibility~
~[ ] Updated the component's README.md with documentation changes~
[x] Tophatted documentation changes in the style guide

Shopify / polaris