From ac8be5cfcc3ea07a4cbd73cca320a46766c1d62e Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 30 Jul 2024 11:28:11 -0500
Subject: [PATCH] Fix custom select keyboard navigation issue

---
 .../components/FolderCustomSelect.vue         | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/perma_web/frontend/components/FolderCustomSelect.vue b/perma_web/frontend/components/FolderCustomSelect.vue
index 7b06f09a4..bce3b88b0 100644
--- a/perma_web/frontend/components/FolderCustomSelect.vue
+++ b/perma_web/frontend/components/FolderCustomSelect.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 import { globalStore } from '../stores/globalStore'
 import { onClickOutside } from '@vueuse/core'
 
@@ -50,6 +50,21 @@ const handleSelectToggle = () => {
     isSelectExpanded.value = !isSelectExpanded.value
 }
 
+const handleKeyboardSelectToggle = async (e) => {
+    const isButton = e.target.matches('button')
+
+    if (!isButton) {
+        return
+    }
+
+    if (isSelectExpanded.value) {
+        return handleArrowDown(e)
+    }
+
+    handleSelectToggle()
+    await nextTick()
+}
+
 const handleFocus = (index) => {
     const itemToFocus = selectListRef.value.querySelector(`[data-index="${index}"]`);
     itemToFocus.focus();
@@ -106,7 +121,9 @@ const handleSelection = (e) => {
         <div ref="selectContainerRef" @keydown.home.prevent="handleFocus(0)"
             @keydown.end.prevent="handleFocus(props.folders.length)" @keydown.esc="handleClose"
             @keydown.tab="handleClose" class="dropdown dropdown-affil" :class="{ 'open': isSelectExpanded }">
-            <button ref="selectButtonRef" @keydown.down.prevent="handleFocus(0)" @click="handleSelectToggle"
+            <button ref="selectButtonRef" @keydown.down.prevent.self="handleKeyboardSelectToggle"
+                @keydown.enter.prevent.self="handleKeyboardSelectToggle"
+                @keydown.space.prevent="handleKeyboardSelectToggle" @click="handleSelectToggle"
                 class="dropdown-toggle selector selector-affil needsclick" type="button" aria-haspopup="listbox"
                 :aria-expanded="isSelectExpanded" aria-owns="folder-select-list">
                 {{ selectedOption }}