fix: Fixes date (+range) picker closing when clicking on disabled reason

src/calendar/grid/index.tsx

@@ -47,22 +47,24 @@ export interface GridProps {
   renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;
   isSameDate: (date: Date, baseDate: Date) => boolean;
   onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;
+  referrerId?: string;
 }
 
 interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   disabledReason?: string;
+  referrerId?: string;
 }
 
 const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
+  const { disabledReason, referrerId, ...rest } = props;
   const isDisabledWithReason = !!disabledReason;
   const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
-  const ref = useRef<HTMLTableCellElement>(null);
+  const cellRef = useRef<HTMLTableCellElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
     <td
-      ref={useMergeRefs(focusedDateRef, ref)}
+      ref={useMergeRefs(focusedDateRef, cellRef)}
       {...(isDisabledWithReason ? targetProps : {})}
       {...rest}
       onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}
@@ -77,9 +79,10 @@ const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTM
           {showTooltip && (
             <Tooltip
               className={styles['disabled-reason-tooltip']}
-              getTrack={() => ref.current}
+              getTrack={() => cellRef.current}
               content={disabledReason!}
               onEscape={() => setShowTooltip(false)}
+              referrerId={referrerId}
             />
           )}
         </>
@@ -105,6 +108,7 @@ export default function Grid({
   renderDateAnnouncement,
   isSameDate,
   onGridKeyDownHandler,
+  referrerId,
 }: GridProps) {
   const focusedDateRef = useRef<HTMLTableCellElement>(null);
 
@@ -166,6 +170,7 @@ export default function Grid({
                     [styles['calendar-date-dense']]: denseGrid,
                   })}
                   disabledReason={isDisabledWithReason ? disabledReason : undefined}
+                  referrerId={referrerId}
                 >
                   <span className={styles['date-inner']} aria-hidden="true">
                     {renderDate(date)}

src/calendar/internal.tsx

@@ -26,6 +26,8 @@ import { getBaseMonth } from './utils/navigation-month';
 
 import styles from './styles.css.js';
 
+type InternalCalendarProps = CalendarProps & InternalBaseComponentProps & { referrerId?: string };
+
 export default function Calendar({
   value,
   locale = '',
@@ -39,11 +41,12 @@ export default function Calendar({
   __internalRootRef,
   i18nStrings,
   granularity = 'day',
+  referrerId,
   previousMonthAriaLabel,
   nextMonthAriaLabel,
   todayAriaLabel,
   ...rest
-}: CalendarProps & InternalBaseComponentProps) {
+}: InternalCalendarProps) {
   checkControlled('Calendar', 'value', value, 'onChange', onChange);
 
   const baseProps = getBaseProps(rest);
@@ -188,6 +191,7 @@ export default function Calendar({
             renderDateAnnouncement={renderDateAnnouncement}
             isSameDate={isSameDate}
             onGridKeyDownHandler={onGridKeyDownHandler}
+            referrerId={referrerId}
           />
         </div>
       </div>

src/date-picker/__tests__/date-picker.test.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import DatePicker, { DatePickerProps } from '../../../lib/components/date-picker';
 import FormField from '../../../lib/components/form-field';
@@ -488,3 +488,41 @@ describe('i18n', () => {
     );
   });
 });
+
+describe('disabled reason behavior', () => {
+  test('clicking on disabled reason does not close the calendar', () => {
+    const { wrapper } = renderDatePicker({
+      ...defaultProps,
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findOpenCalendarButton().click();
+    expect(wrapper.findCalendar()).not.toBe(null);
+
+    wrapper.findCalendar()!.findDateAt(1, 1).focus();
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()!.click();
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()).not.toBe(null);
+    expect(wrapper.findCalendar()).not.toBe(null);
+  });
+
+  test('disabled reason tooltip can be closed with Escape', () => {
+    const { wrapper } = renderDatePicker({
+      ...defaultProps,
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findOpenCalendarButton().click();
+    expect(wrapper.findCalendar()).not.toBe(null);
+
+    wrapper.findCalendar()!.findDateAt(1, 1).focus();
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    fireEvent.keyDown(wrapper.findCalendar()!.findDateAt(1, 1).getElement(), { key: 'Escape', code: 'Escape' });
+    expect(wrapper.findCalendar()).not.toBe(null);
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()).toBe(null);
+  });
+});

src/date-picker/index.tsx

@@ -180,6 +180,8 @@ const DatePicker = React.forwardRef(
 
     baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);
 
+    const referrerId = useUniqueId();
+
     return (
       <div {...baseProps} ref={mergedRef} onKeyDown={!disabled && !readOnly ? onWrapperKeyDownHandler : undefined}>
         {disabled || readOnly ? (
@@ -195,6 +197,7 @@ const DatePicker = React.forwardRef(
             expandToViewport={expandToViewport}
             scrollable={false}
             dropdownId={dropdownId}
+            triggerId={referrerId}
             content={
               isDropDownOpen ? (
                 <FocusLock className={styles['focus-lock']} autoFocus={true}>
@@ -220,6 +223,7 @@ const DatePicker = React.forwardRef(
                         nextMonthAriaLabel: i18nStrings?.nextMonthAriaLabel ?? nextMonthAriaLabel,
                         previousMonthAriaLabel: i18nStrings?.previousMonthAriaLabel ?? previousMonthAriaLabel,
                       }}
+                      referrerId={referrerId}
                     />
                     <InternalLiveRegion id={calendarDescriptionId} hidden={true} tagName="span">
                       {getBaseDateLabel({ date: baseDate, granularity, locale: normalizedLocale })}

src/date-range-picker/__tests__/date-range-picker.test.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import Mockdate from 'mockdate';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -585,3 +585,45 @@ describe('Date range picker', () => {
     });
   });
 });
+
+describe('disabled reason behavior', () => {
+  const findDate = (wrapper: DateRangePickerWrapper) => wrapper.findDropdown()!.findDateAt('left', 1, 1);
+
+  test('clicking on disabled reason does not close the calendar', () => {
+    const { wrapper } = renderDateRangePicker({
+      ...defaultProps,
+      rangeSelectorMode: 'absolute-only',
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findTrigger().click();
+    expect(wrapper.findDropdown()).not.toBe(null);
+
+    findDate(wrapper).focus();
+    expect(findDate(wrapper).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    findDate(wrapper).findDisabledReason()!.click();
+    expect(findDate(wrapper).findDisabledReason()).not.toBe(null);
+    expect(wrapper.findDropdown()).not.toBe(null);
+  });
+
+  test('disabled reason tooltip can be closed with Escape', () => {
+    const { wrapper } = renderDateRangePicker({
+      ...defaultProps,
+      rangeSelectorMode: 'absolute-only',
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findTrigger().click();
+    expect(wrapper.findDropdown()).not.toBe(null);
+
+    findDate(wrapper).focus();
+    expect(findDate(wrapper).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    fireEvent.keyDown(findDate(wrapper).getElement(), { key: 'Escape', code: 'Escape' });
+    expect(wrapper.findDropdown()).not.toBe(null);
+    expect(findDate(wrapper).findDisabledReason()).toBe(null);
+  });
+});

src/date-range-picker/calendar/grids/grid-cell.tsx

@@ -12,10 +12,11 @@ import testutilStyles from '../../test-classes/styles.css.js';
 
 interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   disabledReason?: string;
+  referrerId?: string;
 }
 
 export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
+  const { disabledReason, referrerId, ...rest } = props;
   const isDisabledWithReason = !!disabledReason;
   const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
   const ref = useRef<HTMLTableCellElement>(null);
@@ -73,6 +74,7 @@ export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.
               getTrack={() => ref.current}
               content={disabledReason!}
               onEscape={() => setShowTooltip(false)}
+              referrerId={referrerId}
             />
           )}
         </>

src/date-range-picker/calendar/grids/grid.tsx

@@ -86,6 +86,7 @@ export function Grid({
   className,
   startOfWeek: rawStartOfWeek = 0,
   granularity = 'day',
+  referrerId,
 }: GridProps) {
   const baseDateTime = baseDate?.getTime();
   const i18n = useInternalI18n('date-range-picker');
@@ -275,6 +276,7 @@ export function Grid({
                       aria-disabled={!isEnabled}
                       tabIndex={tabIndex}
                       disabledReason={isDisabledWithReason ? disabledReason : undefined}
+                      referrerId={referrerId}
                       {...handlers}
                     >
                       <span className={styles[`${granularity}-inner`]} aria-hidden="true">

src/date-range-picker/calendar/grids/index.tsx

@@ -62,6 +62,7 @@ export const Grids = ({
   headingIdPrefix,
   startOfWeek = 0,
   granularity = 'day',
+  referrerId,
 }: SelectGridProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [gridHasFocus, setGridHasFocus] = useState(false);
@@ -196,6 +197,7 @@ export const Grids = ({
             className={testutilStyles['first-grid']}
             baseDate={addPages(baseDate, -1)}
             ariaLabelledby={`${headingIdPrefix}-prev${pageUnit}`}
+            referrerId={referrerId}
           />
         )}
         <Grid
@@ -204,6 +206,7 @@ export const Grids = ({
           className={testutilStyles['second-grid']}
           baseDate={baseDate}
           ariaLabelledby={`${headingIdPrefix}-current${pageUnit}`}
+          referrerId={referrerId}
         />
       </InternalSpaceBetween>
     </div>

src/date-range-picker/calendar/grids/interfaces.ts

@@ -34,6 +34,7 @@ export interface GridProps extends GridBaseProps, Required<Pick<CalendarProps, '
   currentMonthAriaLabel?: string;
   startOfWeek?: DayIndex;
   todayAriaLabel?: string;
+  referrerId?: string;
 }
 
 export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'granularity'> {
@@ -53,4 +54,5 @@ export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'gra
   startOfWeek?: DayIndex;
   todayAriaLabel?: string;
   currentMonthAriaLabel?: string;
+  referrerId?: string;
 }

src/date-range-picker/calendar/index.tsx

@@ -52,6 +52,7 @@ export default function DateRangePickerCalendar({
   dateInputFormat,
   customAbsoluteRangeControl,
   granularity = 'day',
+  referrerId,
 }: DateRangePickerCalendarProps) {
   const isSingleGrid = useMobile();
   const isMonthPicker = granularity === 'month';
@@ -273,6 +274,7 @@ export default function DateRangePickerCalendar({
               selectedStartDate={value?.start?.date ? parseDate(value.start.date, !isMonthPicker) : null}
               selectedEndDate={value?.end?.date ? parseDate(value.end.date, !isMonthPicker) : null}
               headingIdPrefix={headingIdPrefix}
+              referrerId={referrerId}
             />
           </div>
 

src/date-range-picker/calendar/interfaces.ts

@@ -55,6 +55,7 @@ export interface DateRangePickerCalendarProps
   value: DateRangePickerProps.PendingAbsoluteValue;
   setValue: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>;
   i18nStrings?: RangeCalendarI18nStrings;
+  referrerId?: string;
 }
 
 export interface RangeInputsProps

src/date-range-picker/dropdown.tsx

@@ -62,6 +62,7 @@ interface DateRangePickerDropdownProps
   isSingleGrid: boolean;
   customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;
   renderRelativeRangeContent: DateRangePickerProps.RelativeRangeControl | undefined;
+  referrerId?: string;
 }
 
 export function DateRangePickerDropdown({
@@ -91,6 +92,7 @@ export function DateRangePickerDropdown({
   customRelativeRangeUnits,
   renderRelativeRangeContent,
   granularity = 'day',
+  referrerId,
 }: DateRangePickerDropdownProps) {
   const i18n = useInternalI18n('date-range-picker');
   const isMonthPicker = granularity === 'month';
@@ -216,6 +218,7 @@ export function DateRangePickerDropdown({
                       dateInputFormat={dateInputFormat}
                       customAbsoluteRangeControl={customAbsoluteRangeControl}
                       granularity={granularity}
+                      referrerId={referrerId}
                     />
                   )}
 

src/date-range-picker/index.tsx

@@ -308,6 +308,7 @@ const DateRangePicker = React.forwardRef(
     );
 
     const mergedRef = useMergeRefs(rootRef, __internalRootRef);
+    const referrerId = useUniqueId();
 
     return (
       <div
@@ -328,6 +329,7 @@ const DateRangePicker = React.forwardRef(
           trigger={trigger}
           expandToViewport={expandToViewport}
           dropdownId={dropdownId}
+          triggerId={referrerId}
           content={
             /* Reset form field context to prevent a wrapper form field from labelling all inputs inside the dropdown. */
             <ResetContextsForModal>
@@ -359,6 +361,7 @@ const DateRangePicker = React.forwardRef(
                   customRelativeRangeUnits={customRelativeRangeUnits}
                   renderRelativeRangeContent={renderRelativeRangeContent}
                   granularity={granularity}
+                  referrerId={referrerId}
                 />
               )}
             </ResetContextsForModal>

src/dropdown/internal.tsx

@@ -504,8 +504,8 @@ const InternalDropdown = ({
     };
   }, [open, expandToViewport, isMobile, triggerRef]);
 
-  const generatedReferrerId = useUniqueId();
-  const referrerId = externalTriggerId || generatedReferrerId;
+  const internalReferrerId = useUniqueId();
+  const referrerId = externalTriggerId ?? internalReferrerId;
 
   // Compute CSS variable values for min/max width
   // These will be used by the use-flexible-width CSS class