diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte index fb301b65fe..9d8c8854be 100644 --- a/web/src/lib/components/elements/search-bar.svelte +++ b/web/src/lib/components/elements/search-bar.svelte @@ -28,9 +28,7 @@ - import { type PersonResponseDto } from '@immich/sdk'; - import { createEventDispatcher } from 'svelte'; + import { createEventDispatcher, onMount } from 'svelte'; import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte'; import Button from '../elements/buttons/button.svelte'; @@ -9,11 +9,17 @@ export let suggestedPeople = false; export let thumbnailData: string; + let inputElement: HTMLInputElement; + const dispatch = createEventDispatcher<{ change: string; cancel: void; input: void; }>(); + + onMount(() => { + inputElement.focus(); + });
dispatch('change', name)} > - dispatch('input')} /> diff --git a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte index a8f0008450..1b7c8c2fad 100644 --- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte +++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte @@ -43,21 +43,20 @@ const filterPeople = (list: PersonResponseDto[], name: string) => { const nameLower = name.toLowerCase(); - return name ? list.filter((p) => p.name.toLowerCase().startsWith(nameLower)) : list; + return name ? list.filter((p) => p.name.toLowerCase().includes(nameLower)) : list; }; {#await peoplePromise then people} {#if people && people.length > 0} - {@const peopleList = showAllPeople ? filterPeople(people, name) : people.slice(0, numberOfPeople)} + {@const peopleList = showAllPeople + ? filterPeople(people, name) + : filterPeople(people, name).slice(0, numberOfPeople)}

PEOPLE

- - {#if showAllPeople} - - {/if} +