From 06a2fcb246b15433b15f25ff8e92413535dc1838 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 02:06:00 +0100
Subject: [PATCH] pr feedback

---
 .../lib/components/elements/buttons/button.svelte   |  6 +++++-
 .../faces-page/merge-suggestion-modal.svelte        | 13 ++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/elements/buttons/button.svelte b/web/src/lib/components/elements/buttons/button.svelte
index a95624ec6..587641e87 100644
--- a/web/src/lib/components/elements/buttons/button.svelte
+++ b/web/src/lib/components/elements/buttons/button.svelte
@@ -26,7 +26,11 @@
   export let fullwidth = false;
   export let border = false;
   export let title: string | undefined = '';
-  export let ref: HTMLButtonElement | null = null;
+  export const focus = () => {
+    ref.focus;
+  };
+
+  let ref: HTMLButtonElement;
 
   const colorClasses: Record<Color, string> = {
     primary:
diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index 2c4f0cab8..bb1255af1 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -17,8 +17,8 @@
   let { isViewing: showAssetViewer } = assetViewingStore;
   let choosePersonToMerge = false;
   let changeFocus = false;
-  let buttonNo: HTMLButtonElement;
-  let buttonYes: HTMLButtonElement;
+  let focusButtonNo: () => void;
+  let focusButtonYes: () => void;
 
   const title = personMerge2.name;
 
@@ -30,15 +30,14 @@
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
     if (!$showAssetViewer) {
-      event.stopPropagation();
       switch (event.key) {
         case 'Tab':
           event.preventDefault();
 
           if (changeFocus) {
-            buttonYes.focus();
+            focusButtonYes();
           } else {
-            buttonNo.focus();
+            focusButtonNo();
           }
 
           changeFocus = !changeFocus;
@@ -144,8 +143,8 @@
         <p class="text-sm text-gray-500 dark:text-gray-300">They will be merged together</p>
       </div>
       <div class="mt-8 flex w-full gap-4 px-4 pb-4">
-        <Button bind:ref={buttonNo} color="gray" fullwidth on:click={() => dispatch('reject')}>No</Button>
-        <Button bind:ref={buttonYes} fullwidth on:click={() => dispatch('confirm', [personMerge1, personMerge2])}
+        <Button bind:focus={focusButtonNo} color="gray" fullwidth on:click={() => dispatch('reject')}>No</Button>
+        <Button bind:focus={focusButtonYes} fullwidth on:click={() => dispatch('confirm', [personMerge1, personMerge2])}
           >Yes</Button
         >
       </div>