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();
       }
     }
   };