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

)

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

* chore: add changesets

* chore: improve changesets

* test: improve test label

.changeset/neat-lizards-remember.md

@@ -0,0 +1,5 @@
+---
+'@contentful/f36-multiselect': minor
+---
+
+improve option label highlighting by trimming the search value

.changeset/proud-files-punch.md

@@ -0,0 +1,5 @@
+---
+'@contentful/f36-multiselect': patch
+---
+
+show option label if there is no match with the search value

packages/components/multiselect/src/Multiselect.test.tsx

@@ -219,6 +219,46 @@ describe('Multiselect with search', () => {
     expect(screen.queryByText('No matches found')).not.toBeInTheDocument();
   });
 
+  it('trims search value', async () => {
+    const [{ user }] = renderComponent({
+      searchProps: {
+        onSearchValueChange: mockOnSearchValueChange,
+      },
+    });
+    await user.click(
+      screen.getByRole('button', { name: 'Toggle Multiselect' }),
+    );
+    const listFirstItem = screen.getByTestId('cf-multiselect-list-item-0');
+
+    await user.type(screen.getByRole('textbox', { name: 'Search' }), ' pp ');
+
+    expect(listFirstItem).toHaveTextContent('Apple');
+    expect(
+      within(listFirstItem).getByTestId('cf-multiselect-item-match'),
+    ).toHaveTextContent('pp');
+    expect(screen.queryByText('No matches found')).not.toBeInTheDocument();
+  });
+
+  it("renders option label without highlight, if search value doesn't match", async () => {
+    const [{ user }] = renderComponent({
+      searchProps: {
+        onSearchValueChange: mockOnSearchValueChange,
+      },
+    });
+    await user.click(
+      screen.getByRole('button', { name: 'Toggle Multiselect' }),
+    );
+    const listFirstItem = screen.getByTestId('cf-multiselect-list-item-0');
+
+    await user.type(screen.getByRole('textbox', { name: 'Search' }), 'Lemon');
+
+    expect(listFirstItem).toHaveTextContent('Apple');
+    expect(
+      within(listFirstItem).queryByTestId('cf-multiselect-item-match'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('No matches found')).not.toBeInTheDocument();
+  });
+
   it('shows the no matches found message when there are no elements', async () => {
     const [{ user }] = renderComponent(
       {

packages/components/multiselect/src/MultiselectOption.tsx

@@ -57,7 +57,12 @@ function HighlightedItem({
   item: string;
   inputValue?: string;
 }) {
-  const { before, match, after } = getStringMatch(item, inputValue);
+  const { before, match, after } = getStringMatch(item, inputValue.trim());
+
+  if (before.length + match.length + after.length === 0) {
+    return <>{item}</>;
+  }
+
   return (
     <>
       {before}