feat(multiselect): handle items without match & trim search value

[andipaetzold]

Purpose of PR

Handles two edge cases:

1. When the search value doesn't match the option text

E.g. when an option with the label Apple is rendered while the search value is Lemon. Currently, the multiselect item is rendered without any label - only the checkbox. With this PR, the option option label is rendered without any highlighting.

2. The search value has leading or trailing white space

Currently, when an option has the label Apple and the search value is pp (not the white space) only the checkbox is rendered without any text. With the fix mentioned above, Apple is rendered without any highlighting. By internally trimming the search value, Apple is rendered with pp highlighted.

PR Checklist

• [x] I have read the relevant readme.md file(s)
• [x] All commits follow our Git commit message convention
• [x] Tests are added/updated/not required
• [x] Tests are passing
• [x] Storybook stories are added/updated/not required
• [x] Usage notes are added/updated/not required
• [x] Has been tested based on Contentful's browser support
• [x] Doesn't contain any sensitive information

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Nov 4, 2024 5:28pm

[github-actions[bot]]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	112.03 KB (0%)	2.3 s (0%)	402 ms (+22.12% 🔺)	2.7 s
Module	110.84 KB (0%)	2.3 s (0%)	509 ms (+36.83% 🔺)	2.8 s

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d6464bb728eaac39499c891263dc8aa113378143

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | --------------------------- | ----- | | @contentful/f36-multiselect | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[denkristoffer]

E.g. when an option with the label Apple is rendered while the search value is Lemon. Currently, the multiselect item is rendered without any label - only the checkbox. With this PR, the option option label is rendered without any highlighting.

Wouldn't it render the no matches message?

[andipaetzold]

E.g. when an option with the label Apple is rendered while the search value is Lemon. Currently, the multiselect item is rendered without any label - only the checkbox. With this PR, the option option label is rendered without any highlighting.

Wouldn't it render the no matches message?

That message is only shown when no item matches at all.