fix: prevent selecting disabled items with keyboard navigation (#326)

Author: QDyanbing

src/index.tsx

@@ -237,15 +237,20 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     // ======================= Keyboard ========================
     const onOffset = (offset: number) => {
-      const currentIndex = segmentedOptions.findIndex(
+      // keep the current option and not disabled options
+      const validOptions = segmentedOptions.filter(
+        (option) => option.value === rawValue || !option.disabled,
+      );
+
+      const currentIndex = validOptions.findIndex(
         (option) => option.value === rawValue,
       );
 
-      const total = segmentedOptions.length;
+      const total = validOptions.length;
       const nextIndex = (currentIndex + offset + total) % total;
+      const nextOption = validOptions[nextIndex];
 
-      const nextOption = segmentedOptions[nextIndex];
-      if (nextOption) {
+      if (nextOption && nextOption.value !== rawValue) {
         setRawValue(nextOption.value);
         onChange?.(nextOption.value);
       }

tests/index.test.tsx

@@ -754,6 +754,33 @@ describe('Segmented keyboard navigation', () => {
     expect(onChange).toHaveBeenCalledWith('iOS');
   });
 
+  it('should not select a disabled option when it is the only next item', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    const { container } = render(
+      <Segmented
+        options={[
+          { label: 'Enabled', value: 'enabled' },
+          { label: 'Disabled', value: 'disabled', disabled: true },
+        ]}
+        defaultValue="enabled"
+        onChange={onChange}
+      />,
+    );
+
+    await user.tab();
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+
+    const inputs = container.querySelectorAll<HTMLInputElement>(
+      '.rc-segmented-item-input',
+    );
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(inputs[0].checked).toBe(true);
+    expect(inputs[1].checked).toBe(false);
+  });
+
   it('should not have focus style when clicking', async () => {
     const user = userEvent.setup();
     const { container } = render(