From 298370b7bea74c7d9814e53bdcb5540ddfa82cc4 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 27 May 2024 10:19:08 +0200
Subject: [PATCH] fix(web): validation of number input fields (#9789)

---
 .../settings/setting-buttons-row.svelte       |  2 +-
 .../settings/setting-input-field.spec.ts      | 21 +++++++++++++++++++
 .../settings/setting-input-field.svelte       |  8 ++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
index 8199db17b2..f479112dee 100644
--- a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
@@ -27,6 +27,6 @@
 
   <div class="right">
     <Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset', { default: false })}>Reset</Button>
-    <Button {disabled} size="sm" on:click={() => dispatch('save')}>Save</Button>
+    <Button type="submit" {disabled} size="sm" on:click={() => dispatch('save')}>Save</Button>
   </div>
 </div>
diff --git a/web/src/lib/components/shared-components/settings/setting-input-field.spec.ts b/web/src/lib/components/shared-components/settings/setting-input-field.spec.ts
index 7b59affdb3..642492dda5 100644
--- a/web/src/lib/components/shared-components/settings/setting-input-field.spec.ts
+++ b/web/src/lib/components/shared-components/settings/setting-input-field.spec.ts
@@ -27,4 +27,25 @@ describe('SettingInputField component', () => {
     await user.click(document.body);
     expect(numberInput.value).toEqual('100');
   });
+
+  it('allows emptying number inputs while editing', async () => {
+    const { getByRole } = render(SettingInputField, {
+      props: {
+        label: 'test-number-input',
+        inputType: SettingInputFieldType.NUMBER,
+        value: 5,
+      },
+    });
+    const user = userEvent.setup();
+
+    const numberInput = getByRole('spinbutton') as HTMLInputElement;
+    expect(numberInput.value).toEqual('5');
+
+    await user.click(numberInput);
+    await user.keyboard('{Backspace}');
+    expect(numberInput.value).toEqual('');
+
+    await user.click(document.body);
+    expect(numberInput.value).toEqual('0');
+  });
 });
diff --git a/web/src/lib/components/shared-components/settings/setting-input-field.svelte b/web/src/lib/components/shared-components/settings/setting-input-field.svelte
index a92482b178..d3da95ebe1 100644
--- a/web/src/lib/components/shared-components/settings/setting-input-field.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-input-field.svelte
@@ -9,6 +9,7 @@
 
 <script lang="ts">
   import { quintOut } from 'svelte/easing';
+  import type { FormEventHandler } from 'svelte/elements';
   import { fly } from 'svelte/transition';
   import PasswordField from '../password-field.svelte';
 
@@ -25,7 +26,9 @@
   export let isEdited = false;
   export let passwordAutocomplete: string = 'current-password';
 
-  const validateInput = () => {
+  const handleChange: FormEventHandler<HTMLInputElement> = (e) => {
+    value = e.currentTarget.value;
+
     if (inputType === SettingInputFieldType.NUMBER) {
       let newValue = Number(value) || 0;
       if (newValue < min) {
@@ -77,8 +80,7 @@
       {step}
       {required}
       {value}
-      on:input={(e) => (value = e.currentTarget.value)}
-      on:blur={validateInput}
+      on:change={handleChange}
       {disabled}
       {title}
     />