From 447ff6fcb38027c320434c67735a561ee59ee412 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:14:21 +0100
Subject: [PATCH] fix(web): clear combobox value when selectedOption is
 undefined (#14334)

---
 web/src/lib/__mocks__/visual-viewport.mock.ts |  9 ++++++
 .../__test__/combobox.spec.ts                 | 30 +++++++++++++++++++
 .../shared-components/change-date.spec.ts     | 12 ++------
 .../shared-components/combobox.svelte         |  2 +-
 4 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 web/src/lib/__mocks__/visual-viewport.mock.ts
 create mode 100644 web/src/lib/components/shared-components/__test__/combobox.spec.ts

diff --git a/web/src/lib/__mocks__/visual-viewport.mock.ts b/web/src/lib/__mocks__/visual-viewport.mock.ts
new file mode 100644
index 0000000000..23903d56cd
--- /dev/null
+++ b/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(),
+});
diff --git a/web/src/lib/components/shared-components/__test__/combobox.spec.ts b/web/src/lib/components/shared-components/__test__/combobox.spec.ts
new file mode 100644
index 0000000000..e1518809b4
--- /dev/null
+++ b/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('');
+  });
+});
diff --git a/web/src/lib/components/shared-components/change-date.spec.ts b/web/src/lib/components/shared-components/change-date.spec.ts
index 815acac5ab..38c72838e5 100644
--- a/web/src/lib/components/shared-components/change-date.spec.ts
+++ b/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', {
-      height: window.innerHeight,
-      width: window.innerWidth,
-      scale: 1,
-      offsetLeft: 0,
-      offsetTop: 0,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    });
+    vi.stubGlobal('visualViewport', getVisualViewportMock());
   });
 
   afterEach(() => {
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index b17644f137..9dcb4d8f25 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/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(