self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-29 11:24:37 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Michel Heusschen 2024-05-27 10:19:08 +02:00 committed by GitHub
parent e3d39837d0
commit 298370b7be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
View File

@ -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>

21
web/src/lib/components/shared-components/settings/setting-input-field.spec.ts
View File

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

8
web/src/lib/components/shared-components/settings/setting-input-field.svelte
View File

@ -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}
/>