fix(web): clear combobox value when selectedOption is undefined (#14334)

web/src/lib/__mocks__/visual-viewport.mock.ts

@@ -0,0 +1,9 @@
+export const getVisualViewportMock = () => ({
+  height: window.innerHeight,
+  width: window.innerWidth,
+  scale: 1,
+  offsetLeft: 0,
+  offsetTop: 0,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+});

web/src/lib/components/shared-components/__test__/combobox.spec.ts

@@ -0,0 +1,30 @@
+import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
+import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
+import Combobox from '$lib/components/shared-components/combobox.svelte';
+import { render, screen } from '@testing-library/svelte';
+
+describe('Combobox component', () => {
+  beforeAll(() => {
+    vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
+    vi.stubGlobal('visualViewport', getVisualViewportMock());
+  });
+
+  it('shows selected option', () => {
+    render(Combobox, {
+      label: 'test',
+      selectedOption: { label: 'option-1', value: 'option-1' },
+    });
+
+    expect(screen.getByRole('combobox')).toHaveValue('option-1');
+  });
+
+  it('clears the selected option when set to undefined', async () => {
+    const { rerender } = render(Combobox, {
+      label: 'test',
+      selectedOption: { label: 'option-1', value: 'option-1' },
+    });
+
+    await rerender({ selectedOption: undefined });
+    expect(screen.getByRole('combobox')).toHaveValue('');
+  });
+});

web/src/lib/components/shared-components/change-date.spec.ts

@@ -1,4 +1,5 @@
 import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
+import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
 import { fireEvent, render, screen } from '@testing-library/svelte';
 import { DateTime } from 'luxon';
 import ChangeDate from './change-date.svelte';
@@ -16,16 +17,7 @@ describe('ChangeDate component', () => {
 
   beforeEach(() => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
-
+    vi.stubGlobal('visualViewport', getVisualViewportMock());
-    vi.stubGlobal('visualViewport', {
-      height: window.innerHeight,
-      width: window.innerWidth,
-      scale: 1,
-      offsetLeft: 0,
-      offsetTop: 0,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    });
   });
 
   afterEach(() => {

web/src/lib/components/shared-components/combobox.svelte

@@ -218,7 +218,7 @@
   const getInputPosition = () => input?.getBoundingClientRect();
 
   $effect(() => {
-    // searchQuery = selectedOption ? selectedOption.label : '';
+    searchQuery = selectedOption ? selectedOption.label : '';
   });
 
   let filteredOptions = $derived(