From 4108cd8895db99f0f7d9a865100c182b2d387fd8 Mon Sep 17 00:00:00 2001
From: Michal <mwargan@gmail.com>
Date: Sat, 16 Mar 2024 09:15:08 +0000
Subject: [PATCH] refactor: focusability on dropdown

---
 src/components/DropdownSelect.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/DropdownSelect.vue b/src/components/DropdownSelect.vue
index fe2403d..0557141 100644
--- a/src/components/DropdownSelect.vue
+++ b/src/components/DropdownSelect.vue
@@ -269,13 +269,19 @@ const getSummaryText = () => {
   return props.placeholder;
 };
 
+const canBeFocusedOn = computed(
+  () =>
+    (props.isOpen &&
+      searchInput.value &&
+      props.searchable &&
+      props.autofocus) ??
+    false
+);
+
 watch(
   () => props.isOpen,
   () => {
-    if (!props.isOpen) return;
-    if (!props.searchable) return;
-    if (!searchInput.value) return;
-    if (!props.autofocus) return;
+    if (!canBeFocusedOn.value) return;
     searchInput.value?.focus();
     // Scroll the dropdown to the top - this is needed because the CSS height animation seems to leave us a little bit scrolled down
     if (dropdownList.value) {
@@ -314,7 +320,7 @@ watch(
           :aria-busy="props.ariaBusy"
           :placeholder="props.searchPlaceholder"
           :aria-label="props.searchPlaceholder"
-          autofocus
+          :autofocus="canBeFocusedOn"
           ref="searchInput"
         />
       </li>