selecting options

Author: thejackshelton

packages/kit-headless/src/components/select/select-item.tsx

@@ -180,10 +180,29 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
         }
         break;
 
-      case 'Tab':
       case 'Escape':
+        context.triggerRef.value?.focus();
+        context.isListboxOpenSig.value = false;
+        break;
+
+      case 'Tab':
         context.isListboxOpenSig.value = false;
         break;
+
+      case 'Enter':
+      case ' ':
+        if (context.isListboxOpenSig.value) {
+          const action = context.multiple ? 'toggle' : 'add';
+          await selectionManager$(context.highlightedIndexSig.value, action);
+
+          if (!context.multiple) {
+            context.triggerRef.value?.focus();
+          }
+        }
+        context.isListboxOpenSig.value = context.multiple
+          ? true
+          : !context.isListboxOpenSig.value;
+        break;
     }
   });
 

packages/kit-headless/src/components/select/select-trigger.tsx

@@ -45,17 +45,6 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
     typeahead$(e.key);
 
     switch (e.key) {
-      case 'Enter':
-      case ' ':
-        if (context.isListboxOpenSig.value) {
-          const action = context.multiple ? 'toggle' : 'add';
-          await selectionManager$(context.highlightedIndexSig.value, action);
-        }
-        context.isListboxOpenSig.value = context.multiple
-          ? true
-          : !context.isListboxOpenSig.value;
-        break;
-
       case 'Tab':
       case 'Escape':
         context.isListboxOpenSig.value = false;
@@ -87,6 +76,13 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
         }
         break;
 
+      case 'Enter':
+      case ' ':
+        context.isListboxOpenSig.value = context.multiple
+          ? true
+          : !context.isListboxOpenSig.value;
+        break;
+
       case 'a':
         if (e.ctrlKey && context.multiple) {
           for (const [index, item] of context.itemsMapSig.value) {