Skip to content

Commit e490128

Browse files
arqexarqex
authored
Merge pull request arqex#729 from arqex/i717
Open the picker on click if it wasn't already open
2 parents b2ba100 + 8c3b88f commit e490128

File tree

8 files changed

+58
-7
lines changed

8 files changed

+58
-7
lines changed

‎dist/react-datetime.cjs.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-datetime.cjs.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-datetime.umd.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-datetime.umd.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/datetime/DateTime.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@ export default class Datetime extends React.Component {
105105
...this.props.inputProps,
106106
onFocus: this._onInputFocus,
107107
onChange: this._onInputChange,
108-
onKeyDown: this._onInputKeyDown
108+
onKeyDown: this._onInputKeyDown,
109+
onClick: this._onInputClick
109110
};
110111

111112
if ( this.props.renderInput ) {
@@ -405,6 +406,7 @@ export default class Datetime extends React.Component {
405406

406407
_closeCalendar = () => {
407408
if ( !this.isOpen() ) return;
409+
408410
this.setState({open: false}, () => {
409411
this.props.onClose( this.state.selectedDate || this.state.inputValue );
410412
});
@@ -596,6 +598,15 @@ export default class Datetime extends React.Component {
596598
}
597599
}
598600

601+
_onInputClick = e => {
602+
// Focus event should open the calendar, but there is some case where
603+
// the input is already focused and the picker is closed, so clicking the input
604+
// should open it again see https://github.com/arqex/react-datetime/issues/717
605+
console.log('CLICKING 2!');
606+
if ( !this.callHandler( this.props.inputProps.onClick, e ) ) return;
607+
this._openCalendar();
608+
}
609+
599610
callHandler( method, e ) {
600611
if ( !method ) return true;
601612
return method(e) !== false;

‎test/__snapshots__/snapshots.spec.js.snap‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ exports[`className: set to arbitraty value 1`] = `
77
<input
88
className="form-control"
99
onChange={[Function]}
10+
onClick={[Function]}
1011
onFocus={[Function]}
1112
onKeyDown={[Function]}
1213
type="text"
@@ -500,6 +501,7 @@ exports[`dateFormat set to false 1`] = `
500501
<input
501502
className="form-control"
502503
onChange={[Function]}
504+
onClick={[Function]}
503505
onFocus={[Function]}
504506
onKeyDown={[Function]}
505507
type="text"
@@ -603,6 +605,7 @@ exports[`dateFormat set to true 1`] = `
603605
<input
604606
className="form-control"
605607
onChange={[Function]}
608+
onClick={[Function]}
606609
onFocus={[Function]}
607610
onKeyDown={[Function]}
608611
type="text"
@@ -1096,6 +1099,7 @@ exports[`defaultValue: set to arbitrary value 1`] = `
10961099
<input
10971100
className="form-control"
10981101
onChange={[Function]}
1102+
onClick={[Function]}
10991103
onFocus={[Function]}
11001104
onKeyDown={[Function]}
11011105
type="text"
@@ -1589,6 +1593,7 @@ exports[`everything default: renders correctly 1`] = `
15891593
<input
15901594
className="form-control"
15911595
onChange={[Function]}
1596+
onClick={[Function]}
15921597
onFocus={[Function]}
15931598
onKeyDown={[Function]}
15941599
type="text"
@@ -2567,6 +2572,7 @@ exports[`input input: set to true 1`] = `
25672572
<input
25682573
className="form-control"
25692574
onChange={[Function]}
2575+
onClick={[Function]}
25702576
onFocus={[Function]}
25712577
onKeyDown={[Function]}
25722578
type="text"
@@ -3060,6 +3066,7 @@ exports[`inputProps with className specified 1`] = `
30603066
<input
30613067
className="arbitrary-className"
30623068
onChange={[Function]}
3069+
onClick={[Function]}
30633070
onFocus={[Function]}
30643071
onKeyDown={[Function]}
30653072
type="text"
@@ -3554,6 +3561,7 @@ exports[`inputProps with disabled specified 1`] = `
35543561
className="form-control"
35553562
disabled={true}
35563563
onChange={[Function]}
3564+
onClick={[Function]}
35573565
onFocus={[Function]}
35583566
onKeyDown={[Function]}
35593567
type="text"
@@ -4048,6 +4056,7 @@ exports[`inputProps with name specified 1`] = `
40484056
className="form-control"
40494057
name="arbitrary-name"
40504058
onChange={[Function]}
4059+
onClick={[Function]}
40514060
onFocus={[Function]}
40524061
onKeyDown={[Function]}
40534062
type="text"
@@ -4541,6 +4550,7 @@ exports[`inputProps with placeholder specified 1`] = `
45414550
<input
45424551
className="form-control"
45434552
onChange={[Function]}
4553+
onClick={[Function]}
45444554
onFocus={[Function]}
45454555
onKeyDown={[Function]}
45464556
placeholder="arbitrary-placeholder"
@@ -5035,6 +5045,7 @@ exports[`inputProps with required specified 1`] = `
50355045
<input
50365046
className="form-control"
50375047
onChange={[Function]}
5048+
onClick={[Function]}
50385049
onFocus={[Function]}
50395050
onKeyDown={[Function]}
50405051
required={true}
@@ -5529,6 +5540,7 @@ exports[`isValidDate: only valid if after yesterday 1`] = `
55295540
<input
55305541
className="form-control"
55315542
onChange={[Function]}
5543+
onClick={[Function]}
55325544
onFocus={[Function]}
55335545
onKeyDown={[Function]}
55345546
type="text"
@@ -5997,6 +6009,7 @@ exports[`open set to false 1`] = `
59976009
<input
59986010
className="form-control"
59996011
onChange={[Function]}
6012+
onClick={[Function]}
60006013
onFocus={[Function]}
60016014
onKeyDown={[Function]}
60026015
type="text"
@@ -6490,6 +6503,7 @@ exports[`open set to true 1`] = `
64906503
<input
64916504
className="form-control"
64926505
onChange={[Function]}
6506+
onClick={[Function]}
64936507
onFocus={[Function]}
64946508
onKeyDown={[Function]}
64956509
type="text"
@@ -6983,6 +6997,7 @@ exports[`renderDay: specified 1`] = `
69836997
<input
69846998
className="form-control"
69856999
onChange={[Function]}
7000+
onClick={[Function]}
69867001
onFocus={[Function]}
69877002
onKeyDown={[Function]}
69887003
type="text"
@@ -7476,6 +7491,7 @@ exports[`renderMonth: specified 1`] = `
74767491
<input
74777492
className="form-control"
74787493
onChange={[Function]}
7494+
onClick={[Function]}
74797495
onFocus={[Function]}
74807496
onKeyDown={[Function]}
74817497
type="text"
@@ -7969,6 +7985,7 @@ exports[`renderYear: specified 1`] = `
79697985
<input
79707986
className="form-control"
79717987
onChange={[Function]}
7988+
onClick={[Function]}
79727989
onFocus={[Function]}
79737990
onKeyDown={[Function]}
79747991
type="text"
@@ -8462,6 +8479,7 @@ exports[`timeFormat set to false 1`] = `
84628479
<input
84638480
className="form-control"
84648481
onChange={[Function]}
8482+
onClick={[Function]}
84658483
onFocus={[Function]}
84668484
onKeyDown={[Function]}
84678485
type="text"
@@ -8944,6 +8962,7 @@ exports[`timeFormat set to true 1`] = `
89448962
<input
89458963
className="form-control"
89468964
onChange={[Function]}
8965+
onClick={[Function]}
89478966
onFocus={[Function]}
89488967
onKeyDown={[Function]}
89498968
type="text"
@@ -9437,6 +9456,7 @@ exports[`value: set to arbitrary value 1`] = `
94379456
<input
94389457
className="form-control"
94399458
onChange={[Function]}
9459+
onClick={[Function]}
94409460
onFocus={[Function]}
94419461
onKeyDown={[Function]}
94429462
type="text"
@@ -9930,6 +9950,7 @@ exports[`viewMode set to days 1`] = `
99309950
<input
99319951
className="form-control"
99329952
onChange={[Function]}
9953+
onClick={[Function]}
99339954
onFocus={[Function]}
99349955
onKeyDown={[Function]}
99359956
type="text"
@@ -10423,6 +10444,7 @@ exports[`viewMode set to months 1`] = `
1042310444
<input
1042410445
className="form-control"
1042510446
onChange={[Function]}
10447+
onClick={[Function]}
1042610448
onFocus={[Function]}
1042710449
onKeyDown={[Function]}
1042810450
type="text"
@@ -10916,6 +10938,7 @@ exports[`viewMode set to time 1`] = `
1091610938
<input
1091710939
className="form-control"
1091810940
onChange={[Function]}
10941+
onClick={[Function]}
1091910942
onFocus={[Function]}
1092010943
onKeyDown={[Function]}
1092110944
type="text"
@@ -11409,6 +11432,7 @@ exports[`viewMode set to years 1`] = `
1140911432
<input
1141011433
className="form-control"
1141111434
onChange={[Function]}
11435+
onClick={[Function]}
1141211436
onFocus={[Function]}
1141311437
onKeyDown={[Function]}
1141411438
type="text"

‎test/testUtils.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ module.exports = {
2727
datetime.find('.form-control').simulate('focus');
2828
},
2929

30+
openDatepickerByClick: datetime => {
31+
datetime.find('.form-control').simulate('click');
32+
},
33+
3034
clickOnElement: (element) => {
3135
return _simulateClickOnElement(element);
3236
},

‎test/tests.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,18 @@ describe('Datetime', () => {
569569
expect(utils.isOpen(component)).toBeFalsy();
570570
});
571571

572+
it('open by click', () => {
573+
const date = new Date(2000, 0, 15, 2, 2, 2, 2);
574+
const component = utils.createDatetime({ value: date, closeOnClickOutside: true });
575+
576+
utils.openDatepicker(component);
577+
expect( component.instance().state.open ).toBeTruthy();
578+
component.instance().setState({open: false});
579+
expect( component.instance().state.open ).toBeFalsy();
580+
utils.openDatepickerByClick(component);
581+
expect( component.instance().state.open ).toBeTruthy();
582+
});
583+
572584
it('increase time', () => {
573585
let i = 0;
574586
const date = new Date(2000, 0, 15, 2, 2, 2, 2),

0 commit comments

Comments
 (0)