diff --git a/src/date-range-picker/__tests__/date-range-picker.test.tsx b/src/date-range-picker/__tests__/date-range-picker.test.tsx
index 43c21b7c50..55df0353b1 100644
--- 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(
+
+
+
+ );
+ 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
index e8f535a5d6..ac89c2101d 100644
--- 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 && (
- 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. */}
+
+ {isDropDownOpen && (
+ 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}
+ />
+ )}
+
);