Handle enter key to toggle checkbox

seek-oss · Apr 12, 2024 · b472eaa · b472eaa
1 parent 0968494
commit b472eaa
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.tsx b/packages/braid-design-system/src/lib/components/TagSelector/TagSelector.tsx
@@ -96,14 +96,30 @@ export const TagSelector = ({
         event.preventDefault();
         setActiveIndex((prevIndex) => Math.max(prevIndex - 1, 0));
         break;
+      case 'Enter':
+        event.preventDefault();
+        const activeDescendant = document.getElementById(
+          `item-${options[activeIndex]}`,
+        );
+        if (activeDescendant) {
+          const checkbox = activeDescendant.querySelector(
+            'input[type="checkbox"]',
+          ) as HTMLInputElement;
+          if (checkbox) {
+            checkbox.checked = !checkbox.checked;
+          }
+        }
+
       default:
         break;
     }
   };
 
   return (
     <div className={styles.Wrapper}>
-      <SelectedTags tags={selectedTags || []} />
+      {(selectedTags || []).length > 0 && (
+        <SelectedTags tags={selectedTags || []} />
+      )}
       <label htmlFor="tag-selector">Select tag</label>
       <div className="combo-wrap">
         <input