c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

fix(web): Prevent DELETE key from clearing DateInput in modal (#8846)

Browse source 
* fix(web): Prevent DELETE key from clearing DateInput in modal (#8804)

* chore: test prettier

* fix: stop propagation

* fix: stop propagation in modal

* fix: remove unnecessary function and revise lint issue

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Yoonjae Choi 2024-04-30 06:59:32 +09:00 committed by GitHub
parent 5722c830ff
commit 461f2595b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
web/src/lib/components/shared-components/change-date.svelte
View file

@ -53,43 +53,35 @@
dispatch('confirm', value); dispatch('confirm', value);
} }
}; };
const handleKeydown = (event: KeyboardEvent) => {
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
event.stopPropagation();
}
};
</script> </script>
<div role="presentation" on:keydown={handleKeydown}> <ConfirmDialogue
<ConfirmDialogue id="edit-date-time-modal"
id="edit-date-time-modal" confirmColor="primary"
confirmColor="primary" title="Edit date and time"
title="Edit date and time" prompt="Please select a new date:"
prompt="Please select a new date:" disabled={!date.isValid}
disabled={!date.isValid} onConfirm={handleConfirm}
onConfirm={handleConfirm} onClose={handleCancel}
onClose={handleCancel} >
> <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
<div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt"> <div class="flex flex-col">
<div class="flex flex-col"> <label for="datetime">Date and Time</label>
<label for="datetime">Date and Time</label> <DateInput
<DateInput class="immich-form-input text-sm my-4 w-full"
class="immich-form-input text-sm my-4 w-full" id="datetime"
id="datetime" type="datetime-local"
type="datetime-local" bind:value={selectedDate}
bind:value={selectedDate} />
/>
</div>
<div class="flex flex-col w-full mt-2">
<Combobox
bind:selectedOption
id="settings-timezone"
label="Timezone"
options={timezones}
placeholder="Search timezone..."
/>
</div>
</div> </div>
</ConfirmDialogue> <div class="flex flex-col w-full mt-2">
</div> <Combobox
bind:selectedOption
id="settings-timezone"
label="Timezone"
options={timezones}
placeholder="Search timezone..."
/>
</div>
</div>
</ConfirmDialogue>

1
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -45,6 +45,7 @@
<FocusTrap> <FocusTrap>
<section <section
role="presentation"
in:fade={{ duration: 100 }} in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }} out:fade={{ duration: 100 }}
class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40" class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"

2
web/src/lib/utils/shortcut.ts
View file

@ -20,7 +20,7 @@ export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
return false; return false;
} }
const type = (event.target as HTMLInputElement).type; const type = (event.target as HTMLInputElement).type;
return ['textarea', 'text'].includes(type); return ['textarea', 'text', 'date', 'datetime-local'].includes(type);
}; };
export const matchesShortcut = (event: KeyboardEvent, shortcut: Shortcut) => { export const matchesShortcut = (event: KeyboardEvent, shortcut: Shortcut) => {