fix(web): validation of number input fields (#9789)

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>

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');
+  });
 });

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:change={handleChange}
-      on:blur={validateInput}
       {disabled}
       {title}
     />