UI: Fix kb nav bug on reset options in Select

Sidnioulz · Sidnioulz · commit 0560aebb8b59 · 2025-12-05T12:48:36.000+01:00
diff --git a/code/core/src/components/components/Select/Select.stories.tsx b/code/core/src/components/components/Select/Select.stories.tsx
@@ -429,6 +429,47 @@ export const KeyboardSelectionMultiSS = meta.story({
   play: kbMultiSelectionTest(' ', ' '),
 });
 
+export const FullArrowNavigation = meta.story({
+  play: async ({ canvas, step }) => {
+    const selectButton = await canvas.findByRole('button');
+    await step('Open select', async () => {
+      selectButton.focus();
+      await userEvent.keyboard('{ArrowDown}');
+      expect(selectButton).toHaveTextContent('Tadpole');
+    });
+
+    await step('Navigate to option 2 with ArrowDown', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(selectButton).toHaveTextContent('Pollywog');
+    });
+
+    await step('Navigate to option 3 with ArrowDown', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(selectButton).toHaveTextContent('Frog');
+    });
+
+    await step('Loop back to option 1 with ArrowDown', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(selectButton).toHaveTextContent('Tadpole');
+    });
+
+    await step('Navigate backwards with ArrowUp', async () => {
+      await userEvent.keyboard('{ArrowUp}');
+      expect(selectButton).toHaveTextContent('Frog');
+    });
+
+    await step('Navigate backwards with ArrowUp', async () => {
+      await userEvent.keyboard('{ArrowUp}');
+      expect(selectButton).toHaveTextContent('Pollywog');
+    });
+
+    await step('Navigate back to option 1 with ArrowUp', async () => {
+      await userEvent.keyboard('{ArrowUp}');
+      expect(selectButton).toHaveTextContent('Tadpole');
+    });
+  },
+});
+
 export const MouseOpenNoAutoselect = meta.story({
   name: 'AutoSelect - nothing selected on Mouse open (single)',
   play: async ({ canvas, args, step }) => {
diff --git a/code/core/src/components/components/Select/Select.tsx b/code/core/src/components/components/Select/Select.tsx
@@ -325,8 +325,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           return;
         }
 
-        const currentIndex = options.findIndex(
-          (option) => externalToValue(option.value) === activeOption.value
+        const currentIndex = options.findIndex((option) =>
+          activeOption.type === 'reset'
+            ? 'type' in option && option.type === 'reset'
+            : externalToValue(option.value) === activeOption.value
         );
         const nextIndex = currentIndex + step;
 
@@ -349,8 +351,11 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           setActiveOption(options[Math.max(0, options.length - step)]);
           return;
         }
-        const currentIndex = options.findIndex(
-          (option) => externalToValue(option.value) === activeOption.value
+
+        const currentIndex = options.findIndex((option) =>
+          activeOption.type === 'reset'
+            ? 'type' in option && option.type === 'reset'
+            : externalToValue(option.value) === activeOption.value
         );
         const nextIndex = currentIndex - step;
 
