fix: Don't pass through form field context to inputs in date range pi…

…cker dropdown
cloudscape-design · Oct 2, 2023 · 30ebbd7 · 30ebbd7
1 parent d8b04de
commit 30ebbd7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 23 deletions.
diff --git a/src/date-range-picker/__tests__/date-range-picker.test.tsx b/src/date-range-picker/__tests__/date-range-picker.test.tsx
@@ -5,6 +5,7 @@ import { act, render } from '@testing-library/react';
 import Mockdate from 'mockdate';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import DateRangePicker, { DateRangePickerProps } from '../../../lib/components/date-range-picker';
+import FormField from '../../../lib/components/form-field';
 import DateRangePickerWrapper from '../../../lib/components/test-utils/dom/date-range-picker';
 import { NonCancelableEventHandler } from '../../../lib/components/internal/events';
 import { i18nStrings } from './i18n-strings';
@@ -83,6 +84,44 @@ describe('Date range picker', () => {
       const { wrapper } = renderDateRangePicker({ ...defaultProps, controlId: 'test' });
       expect(wrapper.findTrigger().getElement()).toHaveAttribute('id', 'test');
     });
+
+    test('does not pass through form field context to dropdown elements', () => {
+      const { container } = render(
+        <FormField label="Label">
+          <DateRangePicker {...defaultProps} />
+        </FormField>
+      );
+      const wrapper = createWrapper(container).findDateRangePicker()!;
+      act(() => wrapper.openDropdown());
+      const dropdown = wrapper.findDropdown()!;
+
+      expect(dropdown.findRelativeRangeRadioGroup()!.getElement()).toHaveAccessibleName(
+        i18nStrings.relativeRangeSelectionHeading
+      );
+
+      dropdown.findRelativeRangeRadioGroup()?.findButtons().at(-1)!.findNativeInput().click();
+      expect(dropdown.findCustomRelativeRangeDuration()!.findNativeInput().getElement()).toHaveAccessibleName(
+        i18nStrings.customRelativeRangeDurationLabel
+      );
+      expect(dropdown.findCustomRelativeRangeUnit()!.findTrigger().getElement()).toHaveAccessibleName(
+        [i18nStrings.customRelativeRangeUnitLabel, 'minutes'].join(' ')
+      );
+
+      changeMode(wrapper, 'absolute');
+
+      expect(dropdown.findStartDateInput()!.findNativeInput()!.getElement()).toHaveAccessibleName(
+        i18nStrings.startDateLabel
+      );
+      expect(dropdown.findStartTimeInput()!.findNativeInput()!.getElement()).toHaveAccessibleName(
+        i18nStrings.startTimeLabel
+      );
+      expect(dropdown.findEndDateInput()!.findNativeInput()!.getElement()).toHaveAccessibleName(
+        i18nStrings.endDateLabel
+      );
+      expect(dropdown.findEndTimeInput()!.findNativeInput()!.getElement()).toHaveAccessibleName(
+        i18nStrings.endTimeLabel
+      );
+    });
   });
 
   test('opens relative range mode by default', () => {

diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx
@@ -16,7 +16,7 @@ import Dropdown from '../internal/components/dropdown';
 import { useFocusTracker } from '../internal/hooks/use-focus-tracker';
 import { useMobile } from '../internal/hooks/use-mobile';
 import ButtonTrigger from '../internal/components/button-trigger';
-import { useFormFieldContext } from '../internal/context/form-field-context';
+import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
 import InternalIcon from '../icon/internal';
 import { normalizeTimeOffset, shiftTimeOffset } from './time-offset';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -274,28 +274,31 @@ const DateRangePicker = React.forwardRef(
           expandToViewport={expandToViewport}
           dropdownId={dropdownId}
         >
-          {isDropDownOpen && (
-            <DateRangePickerDropdown
-              startOfWeek={startOfWeek}
-              locale={normalizedLocale}
-              isSingleGrid={isSingleGrid}
-              onDropdownClose={() => closeDropdown(true)}
-              value={value}
-              showClearButton={showClearButton}
-              isDateEnabled={isDateEnabled}
-              i18nStrings={i18nStrings}
-              onClear={onClear}
-              onApply={onApply}
-              relativeOptions={relativeOptions}
-              isValidRange={isValidRange}
-              dateOnly={dateOnly}
-              timeInputFormat={timeInputFormat}
-              rangeSelectorMode={rangeSelectorMode}
-              ariaLabelledby={ariaLabelledby}
-              ariaDescribedby={ariaDescribedby}
-              customAbsoluteRangeControl={customAbsoluteRangeControl}
-            />
-          )}
+          {/* Reset form field context to prevent a wrapper form field from labelling all inputs inside the dropdown. */}
+          <FormFieldContext.Provider value={{}}>
+            {isDropDownOpen && (
+              <DateRangePickerDropdown
+                startOfWeek={startOfWeek}
+                locale={normalizedLocale}
+                isSingleGrid={isSingleGrid}
+                onDropdownClose={() => closeDropdown(true)}
+                value={value}
+                showClearButton={showClearButton}
+                isDateEnabled={isDateEnabled}
+                i18nStrings={i18nStrings}
+                onClear={onClear}
+                onApply={onApply}
+                relativeOptions={relativeOptions}
+                isValidRange={isValidRange}
+                dateOnly={dateOnly}
+                timeInputFormat={timeInputFormat}
+                rangeSelectorMode={rangeSelectorMode}
+                ariaLabelledby={ariaLabelledby}
+                ariaDescribedby={ariaDescribedby}
+                customAbsoluteRangeControl={customAbsoluteRangeControl}
+              />
+            )}
+          </FormFieldContext.Provider>
         </Dropdown>
       </div>
     );