Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2026-03-27 20:08:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): focus on face-editor search input (#27136)

Browse Source
This commit is contained in:
Andreas Heinz 2026-03-26 18:18:23 +01:00 committed by GitHub
parent 389356149a
commit c9c2322b9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
View File

@ -10,7 +10,7 @@
import { Button, Input, modalManager, toastManager } from '@immich/ui';
import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
import { clamp } from 'lodash-es';
import { onMount } from 'svelte';
import { onMount, tick } from 'svelte';
import { t } from 'svelte-i18n';
interface Props {
@ -27,6 +27,7 @@
let faceRect: Rect | undefined = $state();
let faceSelectorEl: HTMLDivElement | undefined = $state();
let scrollableListEl: HTMLDivElement | undefined = $state();
let searchInputEl: HTMLInputElement | null = $state(null);
let page = $state(1);
let candidates = $state<PersonResponseDto[]>([]);
@ -81,6 +82,8 @@
onMount(async () => {
setupCanvas();
await getPeople();
await tick();
searchInputEl?.focus();
});
const imageContentMetrics = $derived.by(() => {
@ -221,12 +224,15 @@
$effect(() => {
const rect = faceRect;
if (rect) {
const cvs = canvas;
if (rect && cvs) {
rect.on('moving', positionFaceSelector);
rect.on('scaling', positionFaceSelector);
cvs.on('object:modified', () => searchInputEl?.focus());
return () => {
rect.off('moving', positionFaceSelector);
rect.off('scaling', positionFaceSelector);
cvs.off('object:modified', () => searchInputEl?.focus());
};
}
});
@ -290,7 +296,7 @@
};
</script>
<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel }} />
<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel, ignoreInputFields: false }} />
<div
id="face-editor-data"
@ -310,7 +316,7 @@
<p class="text-center text-sm">{$t('select_person_to_tag')}</p>
<div class="my-3 relative">
<Input placeholder={$t('search_people')} bind:value={searchTerm} size="tiny" />
<Input placeholder={$t('search_people')} bind:value={searchTerm} bind:ref={searchInputEl} size="tiny" />
</div>
<div bind:this={scrollableListEl} class="h-62.5 overflow-y-auto mt-2">