fix: [One-Time Password Field] truncate values ​​that exceed the length when pasting

.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

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<HTMLInputElement>('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[]) {

packages/react/one-time-password-field/src/one-time-password-field.tsx

@@ -351,11 +351,13 @@ const OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFie
 
         case 'PASTE': {
           const { value: pastedValue } = action;
-          const value = sanitizeValue(pastedValue);
-          if (!value) {
+          const sanitizedValue = sanitizeValue(pastedValue);
+          if (!sanitizedValue) {
             return;
           }
 
+          const value = sanitizedValue.slice(0, collection.size);
+
           flushSync(() => setValue(value));
           focusInput(collection.at(value.length - 1)?.element);
           return;