diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx index df81cb40008..8108cde8cb6 100644 --- a/packages/react-aria-components/src/DateField.tsx +++ b/packages/react-aria-components/src/DateField.tsx @@ -92,7 +92,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D + data-invalid={state.isInvalid || undefined} + data-disabled={state.isDisabled || undefined} /> ); }); @@ -157,7 +158,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T + data-invalid={state.isInvalid || undefined} + data-disabled={state.isDisabled || undefined} /> ); }); @@ -241,7 +243,7 @@ const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef values={[ [DateFieldStateContext, state], [InputContext, {...inputProps, ref: inputRef}], - [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}] + [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}] ]}> @@ -261,7 +263,8 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef + isInvalid={state.isInvalid} + isDisabled={state.isDisabled}> {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))} diff --git a/packages/react-aria-components/test/DateField.test.js b/packages/react-aria-components/test/DateField.test.js index 6f467435f4b..5bb55d52e93 100644 --- a/packages/react-aria-components/test/DateField.test.js +++ b/packages/react-aria-components/test/DateField.test.js @@ -179,11 +179,15 @@ describe('DateField', () => { it('should support render props', () => { let {getByRole} = render( - + {({isInvalid}) => ( <> - + {segment => } @@ -194,6 +198,24 @@ describe('DateField', () => { expect(group).toHaveAttribute('data-validation-state', 'invalid'); }); + it('should support disabled render prop', () => { + let {getByRole} = render( + + {({isDisabled}) => ( + <> + + + {segment => } + + + )} + + ); + let group = getByRole('group'); + expect(group).toHaveAttribute('data-disabled-state', 'disabled'); + }); + it('should support form value', () => { render( diff --git a/packages/react-aria-components/test/TimeField.test.js b/packages/react-aria-components/test/TimeField.test.js index 5978dd9e9f0..9315b8b91cb 100644 --- a/packages/react-aria-components/test/TimeField.test.js +++ b/packages/react-aria-components/test/TimeField.test.js @@ -112,6 +112,25 @@ describe('TimeField', () => { expect(group).toHaveAttribute('data-validation-state', 'invalid'); }); + it('should support disabled render prop', () => { + let {getByRole} = render( + + {({isDisabled}) => ( + <> + + + {segment => } + + + )} + + ); + + let group = getByRole('group'); + expect(group).toHaveAttribute('data-disabled-state', 'disabled'); + }); + it('should support form value', () => { render(