c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-29 15:11:58 +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);
}
};
const handleKeydown = (event: KeyboardEvent) => {
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
event.stopPropagation();
}
};
</script>
<div role="presentation" on:keydown={handleKeydown}>
<ConfirmDialogue
id="edit-date-time-modal"
confirmColor="primary"
title="Edit date and time"
prompt="Please select a new date:"
disabled={!date.isValid}
onConfirm={handleConfirm}
onClose={handleCancel}
>
<div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
<div class="flex flex-col">
<label for="datetime">Date and Time</label>
<DateInput
class="immich-form-input text-sm my-4 w-full"
id="datetime"
type="datetime-local"
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>
<ConfirmDialogue
id="edit-date-time-modal"
confirmColor="primary"
title="Edit date and time"
prompt="Please select a new date:"
disabled={!date.isValid}
onConfirm={handleConfirm}
onClose={handleCancel}
>
<div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
<div class="flex flex-col">
<label for="datetime">Date and Time</label>
<DateInput
class="immich-form-input text-sm my-4 w-full"
id="datetime"
type="datetime-local"
bind:value={selectedDate}
/>
</div>
</ConfirmDialogue>
</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>
</ConfirmDialogue>

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

@ -45,6 +45,7 @@
<FocusTrap>
<section
role="presentation"
in: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"

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

@ -20,7 +20,7 @@ export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
return false;
}
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) => {