fix(web,a11y): remove autofocus from input fields (#8857)

* fix(web,a11y): remove autofocus from input field

The autofocus attribute can cause the keyboard to unexpectedly appear
for mobile users, and override any other focus management that the
application is doing programatically.

* fix: always include people filter

web/src/lib/components/elements/search-bar.svelte

@@ -28,9 +28,7 @@
       <Icon path={mdiMagnify} size="24" />
     </div>
   </button>
-  <!-- svelte-ignore a11y-autofocus -->
   <input
-    autofocus
     class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
     type="text"
     {placeholder}

web/src/lib/components/faces-page/edit-name-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   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();
+  });
 </script>
 
 <div
@@ -27,13 +33,12 @@
     autocomplete="off"
     on:submit|preventDefault={() => dispatch('change', name)}
   >
-    <!-- svelte-ignore a11y-autofocus -->
     <input
-      autofocus
       class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
       type="text"
       placeholder="New name or nickname"
       bind:value={name}
+      bind:this={inputElement}
       on:input={() => dispatch('input')}
     />
     <Button size="sm" type="submit">Done</Button>

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;
   };
 </script>
 
 {#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)}
 
     <div id="people-selection" class="-mb-4">
       <div class="flex items-center w-full justify-between gap-6">
         <p class="immich-form-label py-3">PEOPLE</p>
-
+        <SearchBar bind:name placeholder="Filter people" isSearching={false} />
-        {#if showAllPeople}
-          <SearchBar bind:name placeholder="Filter people" isSearching={false} />
-        {/if}
       </div>
 
       <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">