diff --git a/components/src/preact/textInput/text-input.tsx b/components/src/preact/textInput/text-input.tsx index 91cb6900..5acb44cf 100644 --- a/components/src/preact/textInput/text-input.tsx +++ b/components/src/preact/textInput/text-input.tsx @@ -93,7 +93,10 @@ const TextSelector = ({ if (inputValue === undefined || inputValue === null || inputValue === '') { return true; } - return item === inputValue; + return ( + item?.toLowerCase().includes(inputValue?.toLowerCase() || '') || + item?.toLowerCase().includes(inputValue?.toLowerCase() || '') + ); } const { diff --git a/components/src/web-components/input/gs-text-input.stories.ts b/components/src/web-components/input/gs-text-input.stories.ts index d640050c..2f957b92 100644 --- a/components/src/web-components/input/gs-text-input.stories.ts +++ b/components/src/web-components/input/gs-text-input.stories.ts @@ -97,7 +97,7 @@ export const Default: StoryObj> = { }, }; -export const FiresEvent: StoryObj> = { +export const FiresEventNoValidInput: StoryObj> = { ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); @@ -126,19 +126,47 @@ export const FiresEvent: StoryObj> = { host: null, }); }); + }, + args: { + ...Default.args, + initialValue: '', + }, +}; + +export const FiresEventValidInput: StoryObj> = { + ...Default, + play: async ({ canvasElement, step }) => { + const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); + + const inputField = () => canvas.getByPlaceholderText('Enter host name'); + const listenerMock = fn(); + await step('Setup event listener mock', async () => { + canvasElement.addEventListener('gs-text-input-changed', listenerMock); + }); + + await step('wait until data is loaded', async () => { + await waitFor(() => { + return expect(inputField()).toBeEnabled(); + }); + }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); + const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); + }); - await expect(listenerMock).toHaveBeenCalledWith( - expect.objectContaining({ - detail: { - host: 'Homo', - }, - }), - ); + await step('Verify event is fired with correct detail', async () => { + await waitFor(() => { + expect(listenerMock).toHaveBeenCalledWith( + expect.objectContaining({ + detail: { + host: 'Homo sapiens', + }, + }), + ); + }); }); }, args: {