parent: a8de69dc | patch | commit | ignore whitespace
Simon Egersand
2017-11-05 f37c3f9af02c1528b41087125ea63791393222a4 
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.
4 files modified
42 ■■■■■ changed files
DateTime.js 9 ●●●●● patch | view | raw | blame | history
README.md 2 ●●●●● patch | view | raw | blame | history
test/__snapshots__/snapshots.spec.js.snap 24 ●●●●● patch | view | raw | blame | history
test/tests.spec.js 7 ●●●●● patch | view | raw | blame | history 
 DateTime.js


@@ -416,10 +416,11 @@


            children = [];




        if ( this.props.input ) {


            children = [ React.createElement('input', assign({


            children = [ React.createElement( 'input', assign({


                key: 'i',


                type: 'text',


                className: 'form-control',


                onClick: this.openCalendar,


                onFocus: this.openCalendar,


                onChange: this.onInputChange,


                onKeyDown: this.onInputKey,


@@ -432,10 +433,10 @@


        if ( this.state.open )


            className += ' rdtOpen';




        return React.createElement('div', {className: className}, children.concat(


            React.createElement('div',


        return React.createElement( 'div', { className: className }, children.concat(


            React.createElement( 'div',


                { key: 'dt', className: 'rdtPicker' },


                React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })


                React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })


            )


        ));


    }




 README.md


@@ -55,7 +55,7 @@


| **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.|


| **viewMode** | `string` or `number` | `'days'` | The default view to display when the picker is shown (`'years'`, `'months'`, `'days'`, `'time'`). |


| **className** | `string` or `string array` | `''` | Extra class name for the outermost markup element. |


| **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). |


| **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). |


| **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).|


| **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). |


| **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


@@ -4,6 +4,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -95,6 +96,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -792,6 +794,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -1144,6 +1147,7 @@


  <input


    className="arbitrary-className"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -1497,6 +1501,7 @@


    className="form-control"


    disabled={true}


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -1850,6 +1855,7 @@


    className="form-control"


    name="arbitrary-name"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -2202,6 +2208,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    placeholder="arbitrary-placeholder"


@@ -2555,6 +2562,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    required={true}


@@ -2908,6 +2916,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -3260,6 +3269,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -3612,6 +3622,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -3964,6 +3975,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -4316,6 +4328,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -4668,6 +4681,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -4995,6 +5009,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -5347,6 +5362,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -5699,6 +5715,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -6051,6 +6068,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -6403,6 +6421,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -6745,6 +6764,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -7097,6 +7117,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -7449,6 +7470,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -7577,6 +7599,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"


@@ -7678,6 +7701,7 @@


  <input


    className="form-control"


    onChange={[Function]}


    onClick={[Function]}


    onFocus={[Function]}


    onKeyDown={[Function]}


    type="text"




 test/tests.spec.js


@@ -200,6 +200,13 @@


        expect(utils.isOpen(component)).toBeTruthy();


    });




    it('opens picker when clicking on input', () => {


        const component = utils.createDatetime();


        expect(utils.isOpen(component)).toBeFalsy();


        component.find('.form-control').simulate('click');


        expect(utils.isOpen(component)).toBeTruthy();


    });




    it('sets CSS class on selected item (day)', () => {


        const component = utils.createDatetime({ viewMode: 'days' });


        utils.openDatepicker(component);