fix(components): ensure undefined is thrown if value is empty

GenSpectrum · Jan 15, 2025 · 1e2054a · 1e2054a
1 parent 2538257
commit 1e2054a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/.../src/preact/textInput/TextChangedEvent.ts → ...preact/textInput/TextInputChangedEvent.ts b/.../src/preact/textInput/TextChangedEvent.ts → ...preact/textInput/TextInputChangedEvent.ts
@@ -1,6 +1,6 @@
 type LapisTextFilter = Record<string, string | null | undefined>;
 
-export class TextChangedEvent extends CustomEvent<LapisTextFilter> {
+export class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
     constructor(detail: LapisTextFilter) {
         super('gs-text-input-changed', {
             detail,

diff --git a/components/src/preact/textInput/text-input.stories.tsx b/components/src/preact/textInput/text-input.stories.tsx
@@ -104,7 +104,7 @@ export const WithInitialValue: StoryObj<TextInputProps> = {
             await expect(changedListenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
-                        host: null,
+                        host: undefined,
                     },
                 }),
             );

diff --git a/components/src/preact/textInput/text-input.tsx b/components/src/preact/textInput/text-input.tsx
@@ -5,7 +5,7 @@ import z from 'zod';
 
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { TextChangedEvent } from './TextChangedEvent';
+import { TextInputChangedEvent } from './TextInputChangedEvent';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -94,7 +94,6 @@ const TextSelector = ({
             return true;
         }
         return (
-            item?.toLowerCase().includes(inputValue?.toLowerCase() || '') ||
             item?.toLowerCase().includes(inputValue?.toLowerCase() || '')
         );
     }
@@ -117,7 +116,7 @@ const TextSelector = ({
         },
         onSelectedItemChange({ selectedItem }) {
             if (selectedItem !== null) {
-                divRef.current?.dispatchEvent(new TextChangedEvent({ [lapisField]: selectedItem }));
+                divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: selectedItem }));
             }
         },
         items,
@@ -130,15 +129,15 @@ const TextSelector = ({
 
     const onInputBlur = () => {
         if (inputValue === '') {
-            divRef.current?.dispatchEvent(new TextChangedEvent({ [lapisField]: null }));
+            divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: undefined }));
             selectItem(null);
         } else if (inputValue !== selectedItem) {
             setInputValue(selectedItem || '');
         }
     };
 
     const clearInput = () => {
-        divRef.current?.dispatchEvent(new TextChangedEvent({ [lapisField]: null }));
+        divRef.current?.dispatchEvent(new TextInputChangedEvent({ [lapisField]: undefined }));
         selectItem(null);
     };
 

diff --git a/components/src/web-components/input/gs-text-input.stories.ts b/components/src/web-components/input/gs-text-input.stories.ts
@@ -123,7 +123,7 @@ export const FiresEventNoValidInput: StoryObj<Required<TextInputProps>> = {
             await userEvent.type(inputField(), '{backspace>9/}');
             await inputField().blur();
             await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                host: null,
+                host: undefined,
             });
         });
     },