fix(ui): svelte select clear event (#1792)

Signed-off-by: axel7083 <[email protected]>

Author: axel7083

packages/frontend/src/lib/select/Select.spec.ts

@@ -121,3 +121,38 @@ test('selecting value should call onchange callback', async () => {
     });
   });
 });
+
+test('clearing value should call onchange callback with undefined', async () => {
+  const onChangeMock = vi.fn();
+  const { container } = render(Select, {
+    label: 'Select Item',
+    items: [
+      {
+        label: 'Dummy Item 1',
+        value: 'item-1',
+      },
+      {
+        label: 'Dummy Item 2',
+        value: 'item-2',
+      },
+    ],
+    value: {
+      label: 'Dummy Item 2',
+      value: 'item-2',
+    },
+    onchange: onChangeMock,
+  });
+
+  // get clear HTMLElement
+  const clear = container.querySelector('button[class~="clear-select"]');
+  // ensure we have two options
+  expect(clear).not.toBeNull();
+  if (!clear) throw new Error('clear is null');
+
+  await fireEvent.click(clear);
+
+  await vi.waitFor(() => {
+    expect(onChangeMock).toHaveBeenCalledWith(undefined);
+    expect(onChangeMock).toHaveBeenCalledOnce();
+  });
+});

packages/frontend/src/lib/select/Select.svelte

@@ -15,13 +15,19 @@ function handleOnChange(e: CustomEvent<T | undefined>): void {
   value = e.detail;
   onchange?.(value);
 }
+
+function handleOnClear(): void {
+  value = undefined;
+  onchange?.(value);
+}
 </script>
 
 <Select
   inputAttributes={{ 'aria-label': label }}
   name={name}
   disabled={disabled}
   value={value}
+  on:clear={handleOnClear}
   on:change={handleOnChange}
   --item-color={'var(--pd-dropdown-item-text)'}
   --item-is-active-color={'var(--pd-dropdown-item-text)'}