From 1291f552282ba459f9920ba5cafa500e64c936df Mon Sep 17 00:00:00 2001
From: mircearoata <mircearoatapalade@gmail.com>
Date: Mon, 5 Feb 2024 23:32:18 +0100
Subject: [PATCH] Focus selected item when select menu is open

---
 frontend/src/lib/components/Select.svelte | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
index 1d922be4..4d8bfb49 100644
--- a/frontend/src/lib/components/Select.svelte
+++ b/frontend/src/lib/components/Select.svelte
@@ -2,7 +2,7 @@
   import { mdiMenuDown } from '@mdi/js';
   import { popup, type PopupSettings, ListBox, ListBoxItem, focusTrap } from '@skeletonlabs/skeleton';
   import type { SizeOptions } from '@floating-ui/dom';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, tick } from 'svelte';
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';
 
@@ -49,6 +49,19 @@
     closeQuery: `.${name}-listbox-item`,
   } as PopupSettings;
 
+  let selectMenu: HTMLDivElement;
+  $: if (comboboxOpen) {
+    const selectedItem = selectMenu.querySelector('[aria-selected=true].listbox-item') as HTMLDivElement | null;
+    const firstItem = selectMenu.querySelector('.listbox-item') as HTMLDivElement | null;
+    tick().then(() => {
+      if (selectedItem) {
+        selectedItem.focus();
+      } else {
+        firstItem?.focus();
+      }
+    });
+  }
+
   // eslint-disable-next-line no-undef
   const dispatch = createEventDispatcher<{change: T}>();
 
@@ -82,7 +95,11 @@
     </button>
   </div>
 
-  <div class="card w-full shadow-xl z-10 duration-0 overflow-y-auto !mt-0 {menuClass}" data-popup={name} use:focusTrap={comboboxOpen}>
+  <div
+    bind:this={selectMenu}
+    class="card w-full shadow-xl z-10 duration-0 overflow-y-auto !mt-0 {menuClass}"
+    data-popup={name}
+    use:focusTrap={comboboxOpen}>
     <!-- 
     Skeleton's popup close function waits for the tranistion duration...
     before actually triggering the transition...