fix(DatePicker): ensure down arrow opens calendar dropdown (#5326)

Refs #5310.

packages/react/src/components/DatePicker/DatePicker-test.js

@@ -399,3 +399,25 @@ describe('DatePickerSkeleton', () => {
  });
  });
 });
+
+describe('Opening up calendar dropdown', () => {
+ const wrapper = mount(
+ <DatePicker datePickerType="range" className="extra-class">
+ <DatePickerInput labelText="Date Picker label" id="input-from" />
+ <DatePickerInput labelText="Date Picker label" id="input-to" />
+ </DatePicker>
+ );
+
+ it('has the range date picker with min and max dates', () => {
+ const datePicker = wrapper.instance();
+ const input = wrapper.find('input').at(0);
+
+ jest.spyOn(datePicker.cal, 'open');
+
+ input
+ .getDOMNode()
+ .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'ArrowDown' }));
+
+ expect(datePicker.cal.open).toHaveBeenCalled();
+ });
+});

packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js

@@ -36,6 +36,9 @@ export default config => fp => {
  // so user can move the keyboard cursor for editing dates
  // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
  event.stopPropagation();
+ } else if (match(event, keys.ArrowDown)) {
+ event.preventDefault();
+ fp.open();
  }
  }
  };