manage tabbing manually

fold-dev · Jun 13, 2024 · 8dee579 · 8dee579
1 parent 7710a52
commit 8dee579
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/packages/core/src/select/select.tsx b/packages/core/src/select/select.tsx
@@ -216,22 +216,22 @@ export const Select = (props: SelectProps) => {
     }
 
     const handleKeyDown = (e) => {
-        const { isUp, isDown, isEnter, isEscape } = getKey(e)
+        const { isUp, isDown, isEnter, isEscape, isTabNormal, isTabReverse } = getKey(e)
 
         if (isEscape && visible) {
             e.preventDefault()
             e.stopPropagation()
             dismiss()
         }
 
-        if (isUp || isDown || isEnter) {
+        if (isUp || isDown || isEnter || isTabNormal || isTabReverse) {
             e.preventDefault()
             e.stopPropagation()
 
-            if (isUp) setCursor(cursor == 0 ? filteredOptions.length - 1 : cursor - 1)
-            if (isDown) setCursor(cursor == filteredOptions.length - 1 ? 0 : cursor + 1)
+            if (isUp || isTabReverse) setCursor(cursor == 0 ? filteredOptions.length - 1 : cursor - 1)
+            if (isDown || isTabNormal) setCursor(cursor == filteredOptions.length - 1 ? 0 : cursor + 1)
             if (isEnter) handleOptionClick(filteredOptions[cursor])
-            if ((isUp || isDown) && as == 'default') scrollCursorIntoView()
+            if ((isUp || isDown || isTabReverse || isTabNormal) && as == 'default') scrollCursorIntoView()
         }
     }
 
@@ -412,7 +412,9 @@ export const SelectList = forwardRef((props: SelectListProps, ref) => {
     useEffect(() => {
         if (!noFocus) {
             containerRef.current?.focus()
-            waitForRender(() => trapFocus(containerRef.current), 10)
+            // not technically necessary because we're managing tabs manually
+            // TODO: as == 'virtual' causes unexpected behaviour
+            if (as == 'default') waitForRender(() => trapFocus(containerRef.current), 10)
         }
     }, [noFocus])