fix: [One-Time Password Field] disable all inputs when disable is true

[nayounsang]

Description

close #3545

• Add test for disable
• disable all inputs when disable is true.

[changeset-bot]

🦋 Changeset detected

Latest commit: c30af52

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@radix-ui/react-one-time-password-field	Patch
radix-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jcgsville]

Shouldn't it also disable the hidden input too? Here's a pnpm patch I'm using:

diff --git a/dist/index.js b/dist/index.js
index e5fff2443a41b5dfb1d8a11c0fb1d70ccf5a4b6d..d4d45420accd7621ac1360b5509c5fd36533a4c7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -332,7 +332,7 @@ var OneTimePasswordField = React.forwardRef(
   }
 );
 var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
-  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name, disabled } = useOneTimePasswordFieldContext(
     "OneTimePasswordFieldHiddenInput",
     __scopeOneTimePasswordField
   );
@@ -351,7 +351,8 @@ var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordF
       spellCheck: false,
       ...props,
       type: "hidden",
-      readOnly: true
+      readOnly: true,
+      disabled
     }
   );
 });
@@ -425,6 +426,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
             maxLength: 1,
             pattern: validation?.pattern,
             readOnly: context.readOnly,
+            disabled: context.disabled,
             value: char,
             placeholder,
             "data-radix-otp-input": "",
diff --git a/dist/index.mjs b/dist/index.mjs
index 64a37420a93cc9d6ba2b24387301a6069ed46784..d8b7473077dbc85c3197a73524b0bc2e6b47a18b 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -292,7 +292,7 @@ var OneTimePasswordField = React.forwardRef(
   }
 );
 var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
-  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name, disabled } = useOneTimePasswordFieldContext(
     "OneTimePasswordFieldHiddenInput",
     __scopeOneTimePasswordField
   );
@@ -311,7 +311,8 @@ var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordF
       spellCheck: false,
       ...props,
       type: "hidden",
-      readOnly: true
+      readOnly: true,
+      disabled
     }
   );
 });
@@ -385,6 +386,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
             maxLength: 1,
             pattern: validation?.pattern,
             readOnly: context.readOnly,
+            disabled: context.disabled,
             value: char,
             placeholder,
             "data-radix-otp-input": "",
diff --git a/src/one-time-password-field.tsx b/src/one-time-password-field.tsx
index f585b61d56f611a035db305cf7430f8c5a0c0f19..7b2cdbe0887feaf2d237632b7672792b32bc4869 100644
--- a/src/one-time-password-field.tsx
+++ b/src/one-time-password-field.tsx
@@ -506,7 +506,7 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
   { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,
   forwardedRef
 ) {
-  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name, disabled } = useOneTimePasswordFieldContext(
     'OneTimePasswordFieldHiddenInput',
     __scopeOneTimePasswordField
   );
@@ -525,6 +525,7 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
       {...props}
       type="hidden"
       readOnly
+      disabled={disabled}
     />
   );
 });
@@ -649,6 +650,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
               maxLength={1}
               pattern={validation?.pattern}
               readOnly={context.readOnly}
+              disabled={context.disabled}
               value={char}
               placeholder={placeholder}
               data-radix-otp-input=""