Skip to content

Commit

Permalink
Merge pull request #3005 from Abdubek/master
Browse files Browse the repository at this point in the history
select time on enter and space, fix onKeyDown in time
  • Loading branch information
martijnrusschen authored May 30, 2021
2 parents 8b67802 + b4359e9 commit 234f4c4
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/calendar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ export default class Calendar extends React.Component {
onMonthMouseLeave: PropTypes.func,
showPopperArrow: PropTypes.bool,
handleOnKeyDown: PropTypes.func,
handleTimeKeyDown: PropTypes.func,
isInputFocused: PropTypes.bool,
customTimeInput: PropTypes.element,
weekAriaLabelPrefix: PropTypes.string,
Expand Down Expand Up @@ -920,6 +921,7 @@ export default class Calendar extends React.Component {
monthRef={this.state.monthContainer}
injectTimes={this.props.injectTimes}
locale={this.props.locale}
handleOnKeyDown={this.props.handleTimeKeyDown}
showTimeSelectOnly={this.props.showTimeSelectOnly}
/>
);
Expand Down
1 change: 1 addition & 0 deletions src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -927,6 +927,7 @@ export default class DatePicker extends React.Component {
showPopperArrow={this.props.showPopperArrow}
excludeScrollbar={this.props.excludeScrollbar}
handleOnKeyDown={this.onDayKeyDown}
handleTimeKeyDown={this.props.onKeyDown}
isInputFocused={this.state.focused}
customTimeInput={this.props.customTimeInput}
setPreSelection={this.setPreSelection}
Expand Down
16 changes: 16 additions & 0 deletions src/time.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default class Time extends React.Component {
monthRef: PropTypes.object,
timeCaption: PropTypes.string,
injectTimes: PropTypes.array,
handleOnKeyDown: PropTypes.func,
locale: PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({ locale: PropTypes.object }),
Expand Down Expand Up @@ -123,6 +124,18 @@ export default class Time extends React.Component {
return classes.join(" ");
};

handleOnKeyDown = (event, time) => {
if (event.key === " ") {
event.preventDefault();
event.key = "Enter";
}

if (event.key === "Enter") {
this.handleClick(time);
}
this.props.handleOnKeyDown(event);
};

renderTimes = () => {
let times = [];
const format = this.props.format ? this.props.format : "p";
Expand Down Expand Up @@ -168,6 +181,9 @@ export default class Time extends React.Component {
this.centerLi = li;
}
}}
onKeyDown={(ev) => {
this.handleOnKeyDown(ev, time);
}}
tabIndex="0"
>
{formatDate(time, format, this.props.locale)}
Expand Down
75 changes: 75 additions & 0 deletions test/timepicker_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@ 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);
}

describe("TimePicker", () => {
let datePicker;
let div;
Expand Down Expand Up @@ -148,6 +160,69 @@ describe("TimePicker", () => {
expect(header).to.have.length(1);
});

it("should select time when Enter is pressed", () => {
renderDatePicker("February 28, 2018 4:43 PM");
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input));
const time = TestUtils.findRenderedComponentWithType(datePicker, Time);
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li");
TestUtils.Simulate.keyDown(lis[1], getKey("Enter"));
expect(getInputString()).to.equal("February 28, 2018 12:30 AM");
});

it("should select time when Space is pressed", () => {
renderDatePicker("February 28, 2018 4:43 PM");
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input));
const time = TestUtils.findRenderedComponentWithType(datePicker, Time);
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li");
TestUtils.Simulate.keyDown(lis[1], getKey(" "));
expect(getInputString()).to.equal("February 28, 2018 12:30 AM");
});

it("should not select time when Escape is pressed", () => {
renderDatePicker("February 28, 2018 4:43 PM");
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input));
const time = TestUtils.findRenderedComponentWithType(datePicker, Time);
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li");
TestUtils.Simulate.keyDown(lis[1], getKey("Escape"));
expect(getInputString()).to.equal("February 28, 2018 4:43 PM");
});

it("should call the onKeyDown handler on key Escape press", () => {
const onKeyDownSpy = sinon.spy();
renderDatePicker("February 28, 2018 4:43 PM", {
onKeyDown: onKeyDownSpy,
});
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input));
const time = TestUtils.findRenderedComponentWithType(datePicker, Time);
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li");
TestUtils.Simulate.keyDown(lis[1], getKey("Escape"));
expect(onKeyDownSpy.calledOnce).to.be.true;
});

it("should call the onKeyDown handler on key Enter press", () => {
const onKeyDownSpy = sinon.spy();
renderDatePicker("February 28, 2018 4:43 PM", {
onKeyDown: onKeyDownSpy,
});
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input));
const time = TestUtils.findRenderedComponentWithType(datePicker, Time);
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li");
TestUtils.Simulate.keyDown(lis[1], getKey("Enter"));
expect(onKeyDownSpy.calledOnce).to.be.true;
});

it("should call the onKeyDown handler on key Space press", () => {
const onKeyDownSpy = sinon.spy();
renderDatePicker("February 28, 2018 4:43 PM", {
onKeyDown: onKeyDownSpy,
});
TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input));
const time = TestUtils.findRenderedComponentWithType(datePicker, Time);
const lis = TestUtils.scryRenderedDOMComponentsWithTag(time, "li");
TestUtils.Simulate.keyDown(lis[1], getKey(" "));
expect(onKeyDownSpy.calledOnce).to.be.true;
});

function setManually(string) {
TestUtils.Simulate.focus(datePicker.input);
TestUtils.Simulate.change(datePicker.input, { target: { value: string } });
Expand Down

0 comments on commit 234f4c4

Please sign in to comment.