From 1071396a4a7a4b42db2599e5e97922e94f4f099a Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 17 Apr 2024 09:15:37 +0000
Subject: [PATCH] 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     |  2 --
 .../lib/components/faces-page/edit-name-input.svelte  | 11 ++++++++---
 .../search-bar/search-people-section.svelte           | 11 +++++------
 3 files changed, 13 insertions(+), 11 deletions(-)

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 @@
       <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}
diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index fa968e6914..f01ecd67e7 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/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>
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;
   };
 </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>
-
-        {#if showAllPeople}
-          <SearchBar bind:name placeholder="Filter people" isSearching={false} />
-        {/if}
+        <SearchBar bind:name placeholder="Filter people" isSearching={false} />
       </div>
 
       <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">