diff --git a/.changeset/famous-icons-arrive.md b/.changeset/famous-icons-arrive.md new file mode 100644 index 000000000..13ce33db9 --- /dev/null +++ b/.changeset/famous-icons-arrive.md @@ -0,0 +1,5 @@ +--- +'@radix-ui/react-one-time-password-field': patch +--- + +truncate values ​​that exceed the length when pasting diff --git a/packages/react/one-time-password-field/src/one-time-password-field.test.tsx b/packages/react/one-time-password-field/src/one-time-password-field.test.tsx index 77c5badcb..7337c6c9b 100644 --- a/packages/react/one-time-password-field/src/one-time-password-field.test.tsx +++ b/packages/react/one-time-password-field/src/one-time-password-field.test.tsx @@ -64,6 +64,17 @@ describe('given a default OneTimePasswordField', () => { await act(async () => await user.paste('1,2,3,4,5,6')); expect(getInputValues(inputs)).toBe('1,2,3,4,5,6'); }); + + // TODO: userEvent paste not behaving as expected. Debug and unskip. + it.todo('should truncate pasted characters to the number of inputs', async () => { + const inputs = screen.getAllByRole('textbox', { + hidden: false, + }); + const firstInput = inputs[0]!; + fireEvent.click(firstInput); + await act(async () => await user.paste('123456789')); + expect(getInputValues(inputs)).toBe('1,2,3,4,5,6'); + }); }); function getInputValues(inputs: HTMLInputElement[]) { diff --git a/packages/react/one-time-password-field/src/one-time-password-field.tsx b/packages/react/one-time-password-field/src/one-time-password-field.tsx index f585b61d5..8328b98fc 100644 --- a/packages/react/one-time-password-field/src/one-time-password-field.tsx +++ b/packages/react/one-time-password-field/src/one-time-password-field.tsx @@ -351,11 +351,13 @@ const OneTimePasswordField = React.forwardRef setValue(value)); focusInput(collection.at(value.length - 1)?.element); return;