fix: Propagate isDisabled prop from DateRangePicker to popover Button (#5413)

Author: snowystinger

packages/@react-aria/datepicker/src/useDateRangePicker.ts

@@ -158,6 +158,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       'aria-labelledby': `${buttonId} ${labelledBy}`,
       'aria-describedby': ariaDescribedBy,
       'aria-expanded': state.isOpen,
+      isDisabled: props.isDisabled || props.isReadOnly,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {

packages/@react-spectrum/datepicker/src/DateRangePicker.tsx

@@ -44,7 +44,6 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
   let {
     isQuiet,
     isDisabled,
-    isReadOnly,
     autoFocus,
     placeholderValue,
     maxVisibleMonths = 1,
@@ -170,8 +169,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
             {...mergeProps(buttonProps, focusPropsButton)}
             UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}
             isQuiet={isQuiet}
-            validationState={validationState}
-            isDisabled={isDisabled || isReadOnly}>
+            validationState={validationState}>
             <CalendarIcon />
           </FieldButton>
           <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>

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

@@ -279,4 +279,19 @@ describe('DateRangePicker', () => {
     await user.click(selected.nextSibling.children[1]);
     expect(dialog).toBeInTheDocument();
   });
+
+  it('should disable button and date input when DatePicker is disabled', () => {
+    let {getByRole} = render(<TestDateRangePicker isDisabled />);
+
+    let button = getByRole('button');
+    expect(button).toBeDisabled();
+
+    let group = getByRole('group');
+    expect(group).toHaveAttribute('aria-disabled', 'true');
+
+    let spinbuttons = within(group).getAllByRole('spinbutton');
+    for (let spinbutton of spinbuttons) {
+      expect(spinbutton).toHaveAttribute('aria-disabled', 'true');
+    }
+  });
 });