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}
+