fix(kselect): keyboard operation issues

src/components/KInput/KInput.vue

@@ -33,6 +33,7 @@
 
       <input
         :id="inputId"
+        ref="inputRef"
         :aria-describedby="helpText ? helpTextId : undefined"
         :aria-invalid="error || hasError || charLimitExceeded ? 'true' : undefined"
         class="input"
@@ -90,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, useSlots, useAttrs, onMounted, nextTick, useId } from 'vue'
+import { computed, ref, watch, useSlots, useAttrs, onMounted, nextTick, useId, useTemplateRef } from 'vue'
 import type { InputProps, InputEmits, InputSlots } from '@/types'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
@@ -139,6 +140,7 @@ const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 const helpTextId = useId()
 const strippedLabel = computed((): string => stripRequiredLabel(label, isRequired.value))
 const hasLabelTooltip = computed((): boolean => !!(labelAttributes?.info || slots['label-tooltip']))
+const inputRef = useTemplateRef('inputRef')
 
 // we need this so we can create a watcher for programmatic changes to the modelValue
 const value = computed({
@@ -245,6 +247,19 @@ const getValue = (): string | number => {
   return currValue.value || modelValueChanged.value ? currValue.value : modelValue
 }
 
+const focus = () => {
+  inputRef.value?.focus?.()
+}
+
+const blur = () => {
+  inputRef.value?.blur?.()
+}
+
+defineExpose({
+  focus,
+  blur,
+})
+
 watch(() => error, (newVal, oldVal) => {
   if (newVal !== oldVal) {
     // bump the key to trigger the transition

src/components/KSelect/KSelect.vue

@@ -28,7 +28,7 @@
         hide-close-icon
         @close="() => onClose(toggle, isToggled.value)"
         @open="() => onOpen(toggle)"
-        @popover-click="() => onPopoverClick(toggle)"
+        @popover-click="toggle"
       >
         <div
           :id="selectWrapperId"
@@ -58,9 +58,9 @@
             @blur="onInputBlur"
             @click="onInputClick"
             @focus="onInputFocus"
+            @keydown="(evt: KeyboardEvent) => triggerFocus(evt, isToggled)"
             @keydown.enter="onInputEnter"
             @keypress="onInputKeypress"
-            @keyup="(evt: any) => triggerFocus(evt, isToggled)"
             @keyup.enter.stop
             @update:model-value="onQueryChange"
           >
@@ -448,20 +448,32 @@ const clearSelection = (): void => {
 }
 
 const selectItemsRef = useTemplateRef('kSelectItems')
+const NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp']
+const OPEN_KEYS = [' ', 'Enter', ...NAVIGATION_KEYS]
 
-const triggerFocus = (evt: any, isToggled: Ref<boolean>): void => {
+const triggerFocus = (evt: KeyboardEvent, isToggled: Ref<boolean>): void => {
   // Ignore `esc` key
-  if (evt.keyCode === 27) {
+  if (evt.key === 'Escape' && isToggled.value) {
     isToggled.value = false
+    popperRef.value?.hidePopover?.()
     return
   }
 
-  const inputElem = selectWrapperRef.value?.children[0] as HTMLInputElement
-  if (!isToggled.value && inputElem) { // simulate click to trigger dropdown open
-    inputElem.click()
+  // per https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+  if (!isToggled.value && OPEN_KEYS.includes(evt.key)) { // simulate click to trigger dropdown open
+    if (NAVIGATION_KEYS.includes(evt.key)) {
+      evt.preventDefault()
+    }
+    // TODO: when it is opened by 'Home', 'End', 'ArrowUp', 'ArrowDown' keys, it should handle
+    // setting focus to different item
+    popperRef.value?.showPopover?.()
+    nextTick(() => selectItemsRef.value?.setFocus('current'))
   }
 
-  if ((evt.key === 'ArrowDown' || evt.key === 'ArrowUp') && isToggled.value) {
+  // TODO: we need to remove this part since the popover should trap the focus
+  // when it got opened, the focus should not be set on the input element.
+  if (NAVIGATION_KEYS.includes(evt.key) && isToggled.value) {
+    evt.preventDefault()
     selectItemsRef.value?.setFocus(evt.key === 'ArrowDown' ? 'down' : 'up')
   }
 }
@@ -501,10 +513,6 @@ const onSelectWrapperClick = (event: Event): void => {
   }
 }
 
-const onPopoverClick = (toggle: () => void) => {
-  toggle()
-}
-
 const onClose = (toggle: () => void, isToggled: boolean) => {
   isDropdownOpen.value = false
 
@@ -518,6 +526,10 @@ const onClose = (toggle: () => void, isToggled: boolean) => {
   if (isToggled) {
     toggle()
   }
+
+  nextTick(() => {
+    inputRef.value?.focus?.()
+  })
 }
 
 const onOpen = (toggle: () => void) => {

src/components/KSelect/KSelectItems.vue

@@ -1,5 +1,7 @@
 <template>
-  <div ref="itemsContainer">
+  <div
+    ref="itemsContainer"
+  >
     <KSelectItem
       v-for="item in nonGroupedItems"
       :key="item.key"
@@ -89,7 +91,7 @@ const getGroupItems = (group: string) => items?.filter(item => item.group === gr
 
 const itemsContainerRef = useTemplateRef('itemsContainer')
 
-const moveItemFocus = (direction: 'down' | 'up'): void => {
+const moveItemFocus = (direction: 'down' | 'up' | 'current'): void => {
   const container = itemsContainerRef.value
   if (!container) {
     return
@@ -102,6 +104,11 @@ const moveItemFocus = (direction: 'down' | 'up'): void => {
 
   const selectedItem = container.querySelector<HTMLButtonElement>(SELECTED_ITEM_SELECTOR)
 
+  if (selectedItem && direction === 'current') {
+    selectedItem.focus()
+    return
+  }
+
   if (selectedItem) {
     const index = [...items].indexOf(selectedItem)
     items[direction === 'down' ? index + 1 : index - 1]?.focus()