Skip to content

Commit f37c3f9

Browse files
simegsimeg
committed
Open calendar when clicking on input element
Before it would just open the calendar on focus, and this would cause problems for users when they close the calendar and want to open it again. Before this change the user would have to trigger an onBlur by clicking somewhere else before triggering onFocus again to open the calendar again.
1 parent a8de69d commit f37c3f9

File tree

4 files changed

+37
-5
lines changed

4 files changed

+37
-5
lines changed

‎DateTime.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -416,10 +416,11 @@ var Datetime = createClass({
416416
children = [];
417417

418418
if ( this.props.input ) {
419-
children = [ React.createElement('input', assign({
419+
children = [ React.createElement( 'input', assign({
420420
key: 'i',
421421
type: 'text',
422422
className: 'form-control',
423+
onClick: this.openCalendar,
423424
onFocus: this.openCalendar,
424425
onChange: this.onInputChange,
425426
onKeyDown: this.onInputKey,
@@ -432,10 +433,10 @@ var Datetime = createClass({
432433
if ( this.state.open )
433434
className += ' rdtOpen';
434435

435-
return React.createElement('div', {className: className}, children.concat(
436-
React.createElement('div',
436+
return React.createElement( 'div', { className: className }, children.concat(
437+
React.createElement( 'div',
437438
{ key: 'dt', className: 'rdtPicker' },
438-
React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
439+
React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
439440
)
440441
));
441442
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ render: function() {
5555
| **onViewModeChange** | `function` | empty function | Callback trigger when the view mode changes. The callback receives the selected view mode string (`years`, `months`, `days` or `time`) as only parameter.|
5656
| **viewMode** | `string` or `number` | `'days'` | The default view to display when the picker is shown (`'years'`, `'months'`, `'days'`, `'time'`). |
5757
| **className** | `string` or `string array` | `''` | Extra class name for the outermost markup element. |
58-
| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). |
58+
| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `onClick`, `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). |
5959
| **isValidDate** | `function` | `() => true` | Define the dates that can be selected. The function receives `(currentDate, selectedDate)` and shall return a `true` or `false` whether the `currentDate` is valid or not. See [selectable dates](#selectable-dates).|
6060
| **renderDay** | `function` | `DOM.td(day)` | Customize the way that the days are shown in the daypicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#customize-the-appearance). |
6161
| **renderMonth** | `function` | `DOM.td(month)` | Customize the way that the months are shown in the monthpicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#customize-the-appearance). |

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`dateFormat set to false 1`] = `
44
<input
55
className="form-control"
66
onChange={[Function]}
7+
onClick={[Function]}
78
onFocus={[Function]}
89
onKeyDown={[Function]}
910
type="text"
@@ -95,6 +96,7 @@ exports[`dateFormat set to true 1`] = `
9596
<input
9697
className="form-control"
9798
onChange={[Function]}
99+
onClick={[Function]}
98100
onFocus={[Function]}
99101
onKeyDown={[Function]}
100102
type="text"
@@ -792,6 +794,7 @@ exports[`input input: set to true 1`] = `
792794
<input
793795
className="form-control"
794796
onChange={[Function]}
797+
onClick={[Function]}
795798
onFocus={[Function]}
796799
onKeyDown={[Function]}
797800
type="text"
@@ -1144,6 +1147,7 @@ exports[`inputProps with className specified 1`] = `
11441147
<input
11451148
className="arbitrary-className"
11461149
onChange={[Function]}
1150+
onClick={[Function]}
11471151
onFocus={[Function]}
11481152
onKeyDown={[Function]}
11491153
type="text"
@@ -1497,6 +1501,7 @@ exports[`inputProps with disabled specified 1`] = `
14971501
className="form-control"
14981502
disabled={true}
14991503
onChange={[Function]}
1504+
onClick={[Function]}
15001505
onFocus={[Function]}
15011506
onKeyDown={[Function]}
15021507
type="text"
@@ -1850,6 +1855,7 @@ exports[`inputProps with name specified 1`] = `
18501855
className="form-control"
18511856
name="arbitrary-name"
18521857
onChange={[Function]}
1858+
onClick={[Function]}
18531859
onFocus={[Function]}
18541860
onKeyDown={[Function]}
18551861
type="text"
@@ -2202,6 +2208,7 @@ exports[`inputProps with placeholder specified 1`] = `
22022208
<input
22032209
className="form-control"
22042210
onChange={[Function]}
2211+
onClick={[Function]}
22052212
onFocus={[Function]}
22062213
onKeyDown={[Function]}
22072214
placeholder="arbitrary-placeholder"
@@ -2555,6 +2562,7 @@ exports[`inputProps with required specified 1`] = `
25552562
<input
25562563
className="form-control"
25572564
onChange={[Function]}
2565+
onClick={[Function]}
25582566
onFocus={[Function]}
25592567
onKeyDown={[Function]}
25602568
required={true}
@@ -2908,6 +2916,7 @@ exports[`open set to false 1`] = `
29082916
<input
29092917
className="form-control"
29102918
onChange={[Function]}
2919+
onClick={[Function]}
29112920
onFocus={[Function]}
29122921
onKeyDown={[Function]}
29132922
type="text"
@@ -3260,6 +3269,7 @@ exports[`open set to true 1`] = `
32603269
<input
32613270
className="form-control"
32623271
onChange={[Function]}
3272+
onClick={[Function]}
32633273
onFocus={[Function]}
32643274
onKeyDown={[Function]}
32653275
type="text"
@@ -3612,6 +3622,7 @@ exports[`test className: set to arbitraty value 1`] = `
36123622
<input
36133623
className="form-control"
36143624
onChange={[Function]}
3625+
onClick={[Function]}
36153626
onFocus={[Function]}
36163627
onKeyDown={[Function]}
36173628
type="text"
@@ -3964,6 +3975,7 @@ exports[`test defaultValue: set to arbitrary value 1`] = `
39643975
<input
39653976
className="form-control"
39663977
onChange={[Function]}
3978+
onClick={[Function]}
39673979
onFocus={[Function]}
39683980
onKeyDown={[Function]}
39693981
type="text"
@@ -4316,6 +4328,7 @@ exports[`test everything default: renders correctly 1`] = `
43164328
<input
43174329
className="form-control"
43184330
onChange={[Function]}
4331+
onClick={[Function]}
43194332
onFocus={[Function]}
43204333
onKeyDown={[Function]}
43214334
type="text"
@@ -4668,6 +4681,7 @@ exports[`test isValidDate: only valid if after yesterday 1`] = `
46684681
<input
46694682
className="form-control"
46704683
onChange={[Function]}
4684+
onClick={[Function]}
46714685
onFocus={[Function]}
46724686
onKeyDown={[Function]}
46734687
type="text"
@@ -4995,6 +5009,7 @@ exports[`test renderDay: specified 1`] = `
49955009
<input
49965010
className="form-control"
49975011
onChange={[Function]}
5012+
onClick={[Function]}
49985013
onFocus={[Function]}
49995014
onKeyDown={[Function]}
50005015
type="text"
@@ -5347,6 +5362,7 @@ exports[`test renderMonth: specified 1`] = `
53475362
<input
53485363
className="form-control"
53495364
onChange={[Function]}
5365+
onClick={[Function]}
53505366
onFocus={[Function]}
53515367
onKeyDown={[Function]}
53525368
type="text"
@@ -5699,6 +5715,7 @@ exports[`test renderYear: specified 1`] = `
56995715
<input
57005716
className="form-control"
57015717
onChange={[Function]}
5718+
onClick={[Function]}
57025719
onFocus={[Function]}
57035720
onKeyDown={[Function]}
57045721
type="text"
@@ -6051,6 +6068,7 @@ exports[`test value: set to arbitrary value 1`] = `
60516068
<input
60526069
className="form-control"
60536070
onChange={[Function]}
6071+
onClick={[Function]}
60546072
onFocus={[Function]}
60556073
onKeyDown={[Function]}
60566074
type="text"
@@ -6403,6 +6421,7 @@ exports[`timeFormat set to false 1`] = `
64036421
<input
64046422
className="form-control"
64056423
onChange={[Function]}
6424+
onClick={[Function]}
64066425
onFocus={[Function]}
64076426
onKeyDown={[Function]}
64086427
type="text"
@@ -6745,6 +6764,7 @@ exports[`timeFormat set to true 1`] = `
67456764
<input
67466765
className="form-control"
67476766
onChange={[Function]}
6767+
onClick={[Function]}
67486768
onFocus={[Function]}
67496769
onKeyDown={[Function]}
67506770
type="text"
@@ -7097,6 +7117,7 @@ exports[`viewMode set to days 1`] = `
70977117
<input
70987118
className="form-control"
70997119
onChange={[Function]}
7120+
onClick={[Function]}
71007121
onFocus={[Function]}
71017122
onKeyDown={[Function]}
71027123
type="text"
@@ -7449,6 +7470,7 @@ exports[`viewMode set to months 1`] = `
74497470
<input
74507471
className="form-control"
74517472
onChange={[Function]}
7473+
onClick={[Function]}
74527474
onFocus={[Function]}
74537475
onKeyDown={[Function]}
74547476
type="text"
@@ -7577,6 +7599,7 @@ exports[`viewMode set to time 1`] = `
75777599
<input
75787600
className="form-control"
75797601
onChange={[Function]}
7602+
onClick={[Function]}
75807603
onFocus={[Function]}
75817604
onKeyDown={[Function]}
75827605
type="text"
@@ -7678,6 +7701,7 @@ exports[`viewMode set to years 1`] = `
76787701
<input
76797702
className="form-control"
76807703
onChange={[Function]}
7704+
onClick={[Function]}
76817705
onFocus={[Function]}
76827706
onKeyDown={[Function]}
76837707
type="text"

‎test/tests.spec.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,13 @@ describe('Datetime', () => {
200200
expect(utils.isOpen(component)).toBeTruthy();
201201
});
202202

203+
it('opens picker when clicking on input', () => {
204+
const component = utils.createDatetime();
205+
expect(utils.isOpen(component)).toBeFalsy();
206+
component.find('.form-control').simulate('click');
207+
expect(utils.isOpen(component)).toBeTruthy();
208+
});
209+
203210
it('sets CSS class on selected item (day)', () => {
204211
const component = utils.createDatetime({ viewMode: 'days' });
205212
utils.openDatepicker(component);

0 commit comments

Comments
 (0)