fix: when specifying the type of One-Time Password Field, the input is displayed as pw. (#3510)

Author: nayounsang

.changeset/fluffy-days-kneel.md

@@ -0,0 +1,10 @@
+---
+'@radix-ui/react-one-time-password-field': patch
+---
+
+
+
+- As stated in the [documentation](https://www.radix-ui.com/primitives/docs/components/one-time-password-field#root), change default to text.
+- Connect a type to input to display the input value in a different way when the type changes.
+- Add test for this feature
+

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

@@ -32,6 +32,27 @@ describe('given a default OneTimePasswordField', () => {
     expect(await axe(rendered.container)).toHaveNoViolations();
   });
 
+  it('should mask input value when type is password', async () => {
+    rendered.rerender(
+      <OneTimePasswordField.Root type="password">
+        <OneTimePasswordField.Input />
+        <OneTimePasswordField.HiddenInput name="code" />
+      </OneTimePasswordField.Root>
+    );
+
+    const input = rendered.container.querySelector(
+      'input:not([type="hidden"])'
+    ) as HTMLInputElement;
+
+    await userEvent.type(input, '1');
+    expect(input.type).toBe('password');
+
+    const hiddenInput = rendered.container.querySelector(
+      'input[type="hidden"]'
+    ) as HTMLInputElement;
+    expect(hiddenInput.value).toBe('1');
+  });
+
   // TODO: userEvent paste not behaving as expected. Debug and unskip.
   // Replicated in storybook for now.
   it.todo('pastes the code into the input', async () => {

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

@@ -211,7 +211,7 @@ const OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFie
       form,
       name,
       placeholder,
-      type = 'password',
+      type = 'text',
       // TODO: Change default to vertical when inputs use vertical writing mode
       orientation = 'horizontal',
       dir,
@@ -638,7 +638,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
           return (
             <Primitive.Root.input
               ref={composedInputRef}
-              type="text"
+              type={context.type}
               aria-label={`Character ${index + 1} of ${collection.size}`}
               autoComplete={supportsAutoComplete ? context.autoComplete : 'off'}
               data-1p-ignore={supportsAutoComplete ? undefined : 'true'}