diff --git a/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx b/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx index b0680769b6..a5a316784d 100644 --- a/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx +++ b/packages/components/context-selector/src/ContextSelectorDropdown/ContextSelectorDropdown.tsx @@ -156,7 +156,12 @@ const ContextSelectorDropdown: React.FC = ({ const itemsNumber = items.length; for (let i = 0; i < itemsNumber; i += 1) { const item = items[i]; - const matching = !searchQuery || item.name.toLowerCase().includes(searchQuery.toLowerCase()); + + const searchQueryInLowerCase = searchQuery.toLowerCase(); + const isMatchingName = item.name?.toLowerCase().includes(searchQueryInLowerCase); + const isMatchingSubtitle = item.subtitle?.toLowerCase().includes(searchQueryInLowerCase); + const matching = !searchQuery || isMatchingName || isMatchingSubtitle; + if (matching) { result.push({ className: classNames, diff --git a/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx b/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx index d6d874a6ab..b0112ffad0 100644 --- a/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx +++ b/packages/components/context-selector/src/__specs__/ContextSelector.spec.tsx @@ -61,4 +61,32 @@ describe('Context selector component', () => { expect(handleDeactivate).toBeCalled(); }); + + test("should display the correct item when searched by subtitle", async () => { + const { getByText , getByPlaceholderText, queryByText } = renderWithProvider( + RENDER_CONTEXT_SELECTOR({ + items: [ + { + name: 'Name 1', + id: 'id_1', + icon: , + }, + { + name: 'Name 2', + subtitle: 'subtitle 2', + id: 'id_2', + icon: , + }, + ] + }) + ); + + userEvent.click(getByText(CONTEXT_TEXTS.buttonLabel)); + + const searchInput = getByPlaceholderText(CONTEXT_TEXTS.searchPlaceholder); + await userEvent.type(searchInput, 'subtitle 2'); + + expect(queryByText("Name 2")).toBeInTheDocument(); + expect(queryByText("Name 1")).not.toBeInTheDocument(); + }) }); diff --git a/packages/portal/stories/components/ContextSelector/data/index.data.tsx b/packages/portal/stories/components/ContextSelector/data/index.data.tsx index b97a90216b..479a1625e9 100644 --- a/packages/portal/stories/components/ContextSelector/data/index.data.tsx +++ b/packages/portal/stories/components/ContextSelector/data/index.data.tsx @@ -173,6 +173,7 @@ export const CONTEXT_ITEMS = [ }, { name: 'Slack', + subtitle: 'Desktop App', id: '1234-1234-1234-1238', icon: , groupName: 'Integrations', @@ -180,6 +181,7 @@ export const CONTEXT_ITEMS = [ }, { name: 'Github', + subtitle: 'Website', id: '1234-1234-1234-12123', icon: , groupName: 'Integrations', @@ -187,6 +189,7 @@ export const CONTEXT_ITEMS = [ }, { name: 'Booking.com', + subtitle: 'Website', id: '1234-1234-1234-1223123', icon: , groupName: 'Integrations',