Preserve the preselect date when the user is typing (Hacker0x01#1407)

* Don't clear the preSelect date when typing in the input * Do this only once
ventusrisk · Jun 19, 2018 · 953c40a · 953c40a
1 parent 04e33c8
commit 953c40a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -248,7 +248,8 @@ export default class DatePicker extends React.Component {
       preSelection:
         open && this.state.open
           ? this.state.preSelection
-          : this.calcInitialState().preSelection
+          : this.calcInitialState().preSelection,
+      lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE
     });
   };
 
@@ -306,7 +307,10 @@ export default class DatePicker extends React.Component {
         return;
       }
     }
-    this.setState({ inputValue: event.target.value });
+    this.setState({
+      inputValue: event.target.value,
+      lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT
+    });
     const date = parseDate(event.target.value, this.props);
     if (date || !event.target.value) {
       this.setSelected(date, event, true);
@@ -424,8 +428,9 @@ export default class DatePicker extends React.Component {
     if (eventKey === "Enter") {
       event.preventDefault();
       if (
-        isMoment(this.state.preSelection) ||
-        isDate(this.state.preSelection)
+        (isMoment(this.state.preSelection) ||
+          isDate(this.state.preSelection)) &&
+        this.state.lastPreSelectChange === PRESELECT_CHANGE_VIA_NAVIGATE
       ) {
         this.handleSelect(copy, event);
         !this.props.shouldCloseOnSelect && this.setPreSelection(copy);
@@ -441,38 +446,33 @@ export default class DatePicker extends React.Component {
       let newSelection;
       switch (eventKey) {
         case "ArrowLeft":
-          event.preventDefault();
           newSelection = subtractDays(copy, 1);
           break;
         case "ArrowRight":
-          event.preventDefault();
           newSelection = addDays(copy, 1);
           break;
         case "ArrowUp":
-          event.preventDefault();
           newSelection = subtractWeeks(copy, 1);
           break;
         case "ArrowDown":
-          event.preventDefault();
           newSelection = addWeeks(copy, 1);
           break;
         case "PageUp":
-          event.preventDefault();
           newSelection = subtractMonths(copy, 1);
           break;
         case "PageDown":
-          event.preventDefault();
           newSelection = addMonths(copy, 1);
           break;
         case "Home":
-          event.preventDefault();
           newSelection = subtractYears(copy, 1);
           break;
         case "End":
-          event.preventDefault();
           newSelection = addYears(copy, 1);
           break;
       }
+      if (!newSelection) return; // Let the input component handle this keydown
+      event.preventDefault();
+      this.setState({ lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE });
       if (this.props.adjustDateOnChange) {
         this.setSelected(newSelection);
       }
@@ -664,3 +664,6 @@ export default class DatePicker extends React.Component {
     );
   }
 }
+
+const PRESELECT_CHANGE_VIA_INPUT = "input";
+const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
diff --git a/test/datepicker_test.js b/test/datepicker_test.js
@@ -37,6 +37,8 @@ function getKey(key) {
       return { key, code: 39, which: 39 };
     case "ArrowDown":
       return { key, code: 40, which: 40 };
+    case "x":
+      return { key, code: 88, which: 88 };
   }
   throw new Error("Unknown key :" + key);
 }
@@ -565,6 +567,13 @@ describe("DatePicker", () => {
       utils.formatDate(data.datePicker.state.preSelection, data.testFormat)
     ).to.equal(utils.formatDate(data.copyM, data.testFormat));
   });
+  it("should not clear the preSelect date when a pressed key is not a navigation key", () => {
+    var data = getOnInputKeyDownStuff();
+    TestUtils.Simulate.keyDown(data.nodeInput, getKey("x"));
+    expect(data.datePicker.state.preSelection.valueOf()).to.equal(
+      data.copyM.valueOf()
+    );
+  });
   describe("onInputKeyDown Enter", () => {
     it("should update the selected date", () => {
       var data = getOnInputKeyDownStuff();
@@ -592,6 +601,9 @@ describe("DatePicker", () => {
       var data = getOnInputKeyDownStuff();
       TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
       TestUtils.Simulate.keyDown(data.nodeInput, getKey("Backspace"));
+      TestUtils.Simulate.change(data.nodeInput, {
+        target: { value: data.nodeInput.value.slice(0, -1) }
+      });
       TestUtils.Simulate.keyDown(data.nodeInput, getKey("Enter"));
       expect(data.callback.calledOnce).to.be.false;
     });