diff --git a/src/index.jsx b/src/index.jsx index 39a0f2ac3..0a448fbff 100644 --- 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 index 9a211033e..0a209fd21 100644 --- 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; });