Merge branch 'master' into bug/sc-40963/dateinput-close-calendar-when-shift-tab-on

Author: KevinFabre-ods

docs-site/src/examples/excludeDateIntervals.js

@@ -1,12 +1,13 @@
 () => {
-	const [startDate, setStartDate] = useState(new Date());
-	return (
-	  <DatePicker
-		selected={startDate}
-		onChange={date => setStartDate(date)}
-		excludeDateIntervals={[{start: subDays(new Date(), 5), end: addDays(new Date(), 5) }]}
-		placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
-	  />
-	);
-  };
-  
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      excludeDateIntervals={[
+        { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
+      ]}
+      placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
+    />
+  );
+};

src/month.jsx

@@ -308,8 +308,11 @@ export default class Month extends React.Component {
   };
 
   onMonthKeyDown = (event, month) => {
-    event.preventDefault();
     const eventKey = event.key;
+    if (eventKey !== "Tab") {
+      // preventDefault on tab event blocks focus change
+      event.preventDefault();
+    }
     if (!this.props.disabledKeyboardNavigation) {
       switch (eventKey) {
         case "Enter":

test/datepicker_test.js

@@ -11,41 +11,9 @@ import TestWrapper from "./test_wrapper.jsx";
 import PopperComponent from "../src/popper_component.jsx";
 import CustomInput from "./helper_components/custom_input.jsx";
 import * as utils from "../src/date_utils";
-import { util } from "chai";
 import Month from "../src/month.jsx";
 
-function getKey(key, shiftKey = false) {
-  let event = null;
-  switch (key) {
-    case "Backspace":
-      event = { key, code: 8, which: 8 };
-    case "Tab":
-      event = { key, code: 9, which: 9 };
-    case "Enter":
-      event = { key, code: 13, which: 13 };
-    case "Escape":
-      event = { key, code: 27, which: 27 };
-    case "PageUp":
-      event = { key, keyCode: 33, which: 33 };
-    case "PageDown":
-      event = { key, keyCode: 34, which: 34 };
-    case "End":
-      event = { key, keyCode: 35, which: 35 };
-    case "Home":
-      event = { key, keyCode: 36, which: 36 };
-    case "ArrowLeft":
-      event = { key, code: 37, which: 37 };
-    case "ArrowUp":
-      event = { key, code: 38, which: 38 };
-    case "ArrowRight":
-      event = { key, code: 39, which: 39 };
-    case "ArrowDown":
-      event = { key, code: 40, which: 40 };
-    case "x":
-      event = { key, code: 88, which: 88 };
-  }
-  return { ...event, shiftKey };
-}
+import { getKey } from "./test_utils";
 
 function getSelectedDayNode(datePicker) {
   return (
@@ -1986,7 +1954,6 @@ describe("DatePicker", () => {
         <DatePicker
           selected={selected}
           onChange={(d) => {
-            console.log("trigger change", d);
             date = d;
           }}
           showTimeSelect

test/month_test.js

@@ -8,23 +8,7 @@ import * as utils from "../src/date_utils";
 import TestUtils from "react-dom/test-utils";
 import { runAxe } from "./run_axe";
 
-function getKey(key) {
-  switch (key) {
-    case "Tab":
-      return { key, code: 9, which: 9 };
-    case "Enter":
-      return { key, code: 13, which: 13 };
-    case "ArrowLeft":
-      return { key, code: 37, which: 37 };
-    case "ArrowRight":
-      return { key, code: 39, which: 39 };
-    case "ArrowUp":
-      return { key, code: 38, which: 38 };
-    case "ArrowDown":
-      return { key, code: 40, which: 40 };
-  }
-  throw new Error("Unknown key :" + key);
-}
+import { getKey } from "./test_utils";
 
 describe("Month", () => {
   function assertDateRangeInclusive(month, start, end) {

test/test_utils.js

@@ -0,0 +1,37 @@
+export function getKey(key, shiftKey = false) {
+  let event = null;
+  switch (key) {
+    case "Backspace":
+      event = { key, code: 8, which: 8 };
+    case "Tab":
+      event = { key, code: 9, which: 9 };
+    case "Enter":
+      event = { key, code: 13, which: 13 };
+    case "Escape":
+      event = { key, code: 27, which: 27 };
+    case " ":
+      event = { key, code: 32, which: 32 };
+    case "PageUp":
+      event = { key, keyCode: 33, which: 33 };
+    case "PageDown":
+      event = { key, keyCode: 34, which: 34 };
+    case "End":
+      event = { key, keyCode: 35, which: 35 };
+    case "Home":
+      event = { key, keyCode: 36, which: 36 };
+    case "ArrowLeft":
+      event = { key, code: 37, which: 37 };
+    case "ArrowRight":
+      event = { key, code: 39, which: 39 };
+    case "ArrowUp":
+      event = { key, code: 38, which: 38 };
+    case "ArrowDown":
+      event = { key, code: 40, which: 40 };
+    case "x":
+      event = { key, code: 88, which: 88 };
+  }
+  if (!event) {
+    throw new Error("Unknown key :" + key);
+  }
+  return { ...event, shiftKey };
+}

test/time_input_test.js

@@ -32,17 +32,15 @@ describe("timeInput", () => {
   });
 
   xit("should trigger onChange event", () => {
-    const timeComponent = shallow(
-      <InputTimeComponent onChange={console.log} />
-    );
+    const timeComponent = shallow(<InputTimeComponent />);
     const input = timeComponent.find("input");
     input.simulate("change", { target: { value: "13:00" } });
     expect(timeComponent.state("time")).to.equal("13:00");
   });
 
   it("should trigger onChange event and set the value as last valid timeString if empty string is passed as time input value", () => {
     const timeComponent = shallow(
-      <InputTimeComponent timeString="13:00" onChange={console.log} />
+      <InputTimeComponent timeString="13:00" onChange={() => {}} />
     );
     const input = timeComponent.find("input");
     input.simulate("change", { target: { value: "" } });
@@ -53,7 +51,6 @@ describe("timeInput", () => {
     const timeComponent = shallow(
       <InputTimeComponent
         timeString="13:00"
-        onChange={console.log}
         customTimeInput={<CustomTimeInput />}
       />
     );
@@ -69,7 +66,6 @@ describe("timeInput", () => {
       <InputTimeComponent
         date={new Date()}
         timeString="13:00"
-        onChange={console.log}
         customTimeInput={<CustomTimeInput onTimeChange={onTimeChangeSpy} />}
       />
     );
@@ -93,11 +89,7 @@ describe("timeInput", () => {
 
   xit("should update input value if time is updated from outside", (done) => {
     const timeComponent = mount(
-      <InputTimeComponent
-        date={new Date()}
-        timeString="13:00"
-        onChange={console.log}
-      />
+      <InputTimeComponent date={new Date()} timeString="13:00" />
     );
 
     expect(timeComponent.find("input").props.value).to.equal("13:00");

test/timepicker_test.js

@@ -5,17 +5,7 @@ import ReactDOM from "react-dom";
 import Time from "../src/time";
 import { newDate, formatDate } from "../src/date_utils";
 
-function getKey(key) {
-  switch (key) {
-    case " ":
-      return { key, code: 32, which: 32 };
-    case "Enter":
-      return { key, code: 13, which: 13 };
-    case "Escape":
-      return { key, code: 27, which: 27 };
-  }
-  throw new Error("Unknown key :" + key);
-}
+import { getKey } from "./test_utils";
 
 describe("TimePicker", () => {
   let datePicker;
@@ -78,7 +68,6 @@ describe("TimePicker", () => {
         showTimeSelect
         showTimeSelectOnly
         timeClassName={handleTimeColors}
-        onChange={() => console.log("changed")}
         open
         focus
       />

test/year_dropdown_options_test.js

@@ -279,11 +279,6 @@ describe("YearDropdownOptions with scrollable dropwdown", () => {
       .map((node) => node.text());
     const x = textContents.find((year) => year === utils.getYear(minDate));
     expect(x).to.be.undefined;
-    console.log(
-      "kektus",
-      x,
-      textContents.find((year) => year === utils.getYear(minDate))
-    );
     expect(textContents.find((year) => year === utils.getYear(maxDate))).to.be
       .undefined;
     expect(