fix: fixed arrow navigation

Author: kouts

playground/App.vue

@@ -3,12 +3,16 @@ import SimpleDropdown from '@/VueSimpleDropdown.vue'
 import { ref } from 'vue'
 
 const example = ref('vue-simple-dropdown')
+const toggle = ref(true)
 </script>
 
 <template>
   <div class="container mx-auto px-4">
     <div h1 class="text-3xl font-bold pt-4">Playground for {{ example }}</div>
     <div class="mt-4">
+      <button type="button" class="border p-2" @click="toggle = !toggle">Toggle</button>
+    </div>
+    <div v-if="toggle" class="mt-4">
       <SimpleDropdown class="inline" popper-class="border rounded">
         <!-- This will be the popover reference (for the events and position) -->
         <button
@@ -19,21 +23,19 @@ const example = ref('vue-simple-dropdown')
 
         <!-- This will be the content of the popover -->
         <template #popper="{ hide }">
-          <div class="w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
+          <div class="w-44 bg-white rounded shadow dark:bg-gray-700">
             <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
               <li>
-                <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" @click="hide"
-                  >Dashboard</a
-                >
+                <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none" @click="hide">Dashboard</a>
               </li>
               <li>
-                <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
+                <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Settings</a>
               </li>
               <li>
-                <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
+                <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Earnings</a>
               </li>
               <li>
-                <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
+                <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Sign out</a>
               </li>
             </ul>
           </div>

src/VueSimpleDropdown.vue

@@ -1,5 +1,13 @@
 <template>
-  <BaseDropdown :distance="14" placement="bottom-start" :triggers="['click']" auto-hide>
+  <BaseDropdown
+    ref="baseDropdown"
+    :distance="14"
+    placement="bottom-start"
+    :triggers="['click']"
+    auto-hide
+    @show="show"
+    @hide="hide"
+  >
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
@@ -8,10 +16,64 @@
 
 <script setup lang="ts">
 import BaseDropdown from './BaseDropdown.vue'
+import { getNextActiveElement, isVisible } from './utils'
+import { onBeforeUnmount, ref } from 'vue'
 import 'floating-vue/dist/style.css'
+
+interface Props {
+  dropdownItemSelector?: string
+  enableArrowNavigation?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dropdownItemSelector: 'li > a:not(.disabled):not(:disabled)'
+})
+
+type popperContentRef = { $el: HTMLElement }
+type baseDropdownRef = { hide: () => void; $el: HTMLElement; $refs: { popperContent: popperContentRef } }
+
+const ARROW_UP_KEY = 'ArrowUp'
+const ARROW_DOWN_KEY = 'ArrowDown'
+const ESCAPE_KEY = 'Escape'
+const baseDropdown = ref<baseDropdownRef | null>(null)
+
+const popoverKeydown = (e: KeyboardEvent) => {
+  const popover = baseDropdown.value as baseDropdownRef
+  const popperContentEl = popover.$refs.popperContent.$el
+
+  if ([ARROW_UP_KEY, ARROW_DOWN_KEY].includes(e.key)) {
+    e.preventDefault()
+
+    let items = [...popperContentEl.querySelectorAll(`${props.dropdownItemSelector}`)] as HTMLElement[]
+
+    items = items.filter((element) => isVisible(element))
+
+    if (!items.length) {
+      return
+    }
+
+    const target = e.target as HTMLInputElement
+
+    getNextActiveElement(items, target, e.key === ARROW_DOWN_KEY, !items.includes(target)).focus()
+  }
+  if (e.key === ESCAPE_KEY) {
+    popover.hide()
+  }
+}
+const show = () => {
+  document.addEventListener('keydown', popoverKeydown)
+}
+
+const hide = () => {
+  document.removeEventListener('keydown', popoverKeydown)
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', popoverKeydown)
+})
 </script>
 
-<style>
+<style scoped>
 .v-popper--theme-simple .v-popper__inner {
   background: #fff;
 }

src/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * Checks whether an element is visible
+ */
+export const isVisible = (element: HTMLElement) => {
+  if (!(element instanceof Element)) {
+    throw Error('You must provide a DOM element.')
+  }
+
+  return (
+    !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length) &&
+    window.getComputedStyle(element).visibility !== 'hidden' &&
+    window.getComputedStyle(element).display !== 'none'
+  )
+}
+
+/**
+ * Return the previous/next element of a list.
+ */
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  // if the element does not exist in the list return an element
+  // depending on the direction and if cycle is allowed
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}

tsconfig.json

@@ -12,8 +12,9 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": [
-      "esnext",
-      "dom"
+      "ES2016",
+      "DOM",
+      "DOM.Iterable"
     ],
     "paths": {
       "@/*": [