diff --git a/src/index.tsx b/src/index.tsx index 017aebc..d1797f5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -248,19 +248,32 @@ const Segmented = React.forwardRef( const nextOption = validOptions[nextIndex]; if (nextOption && nextOption.value !== rawValue) { + const optionIndex = segmentedOptions.indexOf(nextOption); + containerRef.current + ?.querySelectorAll(`input.${prefixCls}-item-input`) + [optionIndex]?.focus(); setRawValue(nextOption.value); onChange?.(nextOption.value); } }; const handleKeyDown = (event: React.KeyboardEvent) => { + const isRtl = direction === 'rtl'; switch (event.key) { case 'ArrowLeft': + event.preventDefault(); + onOffset(isRtl ? 1 : -1); + break; + case 'ArrowRight': + event.preventDefault(); + onOffset(isRtl ? -1 : 1); + break; case 'ArrowUp': + event.preventDefault(); onOffset(-1); break; - case 'ArrowRight': case 'ArrowDown': + event.preventDefault(); onOffset(1); break; } diff --git a/tests/index.test.tsx b/tests/index.test.tsx index a686201..8165dde 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -719,6 +719,35 @@ describe('Segmented keyboard navigation', () => { expect(onChange).toHaveBeenCalledWith('Web'); }); + it('should handle arrow navigation in RTL mode and prevent default', async () => { + const user = userEvent.setup(); + const onChange = jest.fn(); + const { getAllByRole } = render( + , + ); + + await user.tab(); + await user.tab(); + + // In RTL, ArrowRight moves to previous item + await user.keyboard('{ArrowRight}'); + expect(onChange).toHaveBeenCalledWith('Web'); + + expect(getAllByRole('radio')[2]).toHaveFocus(); + + onChange.mockClear(); + + // In RTL, ArrowLeft moves to next item + await user.keyboard('{ArrowLeft}'); + expect(onChange).toHaveBeenCalledWith('iOS'); + expect(getAllByRole('radio')[0]).toHaveFocus(); + }); + it('should skip Tab navigation when disabled', async () => { const user = userEvent.setup(); const { container } = render(