Pass disabled prop to hidden input in NumberField

Author: tklepzig

packages/react-aria-components/src/NumberField.tsx

@@ -127,7 +127,7 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         data-disabled={props.isDisabled || undefined}
         data-required={props.isRequired || undefined}
         data-invalid={validation.isInvalid || undefined} />
-      {props.name && <input type="hidden" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
+      {props.name && <input type="hidden" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} disabled={props.isDisabled || undefined} />}
     </Provider>
   );
 });

packages/react-aria-components/test/NumberField.test.js

@@ -135,6 +135,12 @@ describe('NumberField', () => {
     expect(input).toHaveValue('');
   });
 
+  it('should support disabled when having a form value', () => {
+    render(<TestNumberField isDisabled name="test" form="test" value={25} formatOptions={{style: 'currency', currency: 'USD'}} />);
+    let input = document.querySelector('input[name=test]');
+    expect(input).toBeDisabled();
+  });
+
   it('should render data- attributes only on the outer element', () => {
     let {getAllByTestId} = render(
       <TestNumberField data-testid="number-field" />