Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open the picker on click if it wasn't already open #729

Merged
merged 3 commits into from Sep 23, 2020
Merged

Open the picker on click if it wasn't already open #729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3a20f2
Open the picker on click if it wasn't already open
arqex Sep 21, 2020
c27287a
Removes unnecessary height from the playground wrapper
arqex Sep 23, 2020
8c3b88f
Fixes conflicts
arqex Sep 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/react-datetime.cjs.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/react-datetime.cjs.js.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/react-datetime.umd.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/react-datetime.umd.js.map
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion src/datetime/DateTime.js
View file
Open in desktop
Expand Up @@ -105,7 +105,8 @@ export default class Datetime extends React.Component {
...this.props.inputProps,
onFocus: this._onInputFocus,
onChange: this._onInputChange,
onKeyDown: this._onInputKeyDown
onKeyDown: this._onInputKeyDown,
onClick: this._onInputClick
};

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

_closeCalendar = () => {
if ( !this.isOpen() ) return;

this.setState({open: false}, () => {
this.props.onClose( this.state.selectedDate || this.state.inputValue );
});
Expand Down Expand Up @@ -596,6 +598,15 @@ export default class Datetime extends React.Component {
}
}

_onInputClick = e => {
// Focus event should open the calendar, but there is some case where
// the input is already focused and the picker is closed, so clicking the input
// should open it again see https://github.com/arqex/react-datetime/issues/717
console.log('CLICKING 2!');
if ( !this.callHandler( this.props.inputProps.onClick, e ) ) return;
this._openCalendar();
}

callHandler( method, e ) {
if ( !method ) return true;
return method(e) !== false;
Expand Down
24 changes: 24 additions & 0 deletions test/__snapshots__/snapshots.spec.js.snap
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ exports[`className: set to arbitraty value 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -500,6 +501,7 @@ exports[`dateFormat set to false 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -603,6 +605,7 @@ exports[`dateFormat set to true 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -1096,6 +1099,7 @@ exports[`defaultValue: set to arbitrary value 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -1589,6 +1593,7 @@ exports[`everything default: renders correctly 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -2567,6 +2572,7 @@ exports[`input input: set to true 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -3060,6 +3066,7 @@ exports[`inputProps with className specified 1`] = `
<input
className="arbitrary-className"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -3554,6 +3561,7 @@ exports[`inputProps with disabled specified 1`] = `
className="form-control"
disabled={true}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -4048,6 +4056,7 @@ exports[`inputProps with name specified 1`] = `
className="form-control"
name="arbitrary-name"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -4541,6 +4550,7 @@ exports[`inputProps with placeholder specified 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="arbitrary-placeholder"
Expand Down Expand Up @@ -5035,6 +5045,7 @@ exports[`inputProps with required specified 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
required={true}
Expand Down Expand Up @@ -5529,6 +5540,7 @@ exports[`isValidDate: only valid if after yesterday 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -5997,6 +6009,7 @@ exports[`open set to false 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -6490,6 +6503,7 @@ exports[`open set to true 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -6983,6 +6997,7 @@ exports[`renderDay: specified 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -7476,6 +7491,7 @@ exports[`renderMonth: specified 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -7969,6 +7985,7 @@ exports[`renderYear: specified 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -8462,6 +8479,7 @@ exports[`timeFormat set to false 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -8944,6 +8962,7 @@ exports[`timeFormat set to true 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -9437,6 +9456,7 @@ exports[`value: set to arbitrary value 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -9930,6 +9950,7 @@ exports[`viewMode set to days 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -10423,6 +10444,7 @@ exports[`viewMode set to months 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -10916,6 +10938,7 @@ exports[`viewMode set to time 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down Expand Up @@ -11409,6 +11432,7 @@ exports[`viewMode set to years 1`] = `
<input
className="form-control"
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="text"
Expand Down
4 changes: 4 additions & 0 deletions test/testUtils.js
View file
Open in desktop
Expand Up @@ -27,6 +27,10 @@ module.exports = {
datetime.find('.form-control').simulate('focus');
},

openDatepickerByClick: datetime => {
datetime.find('.form-control').simulate('click');
},

clickOnElement: (element) => {
return _simulateClickOnElement(element);
},
Expand Down
12 changes: 12 additions & 0 deletions test/tests.spec.js
View file
Open in desktop
Expand Up @@ -569,6 +569,18 @@ describe('Datetime', () => {
expect(utils.isOpen(component)).toBeFalsy();
});

it('open by click', () => {
const date = new Date(2000, 0, 15, 2, 2, 2, 2);
const component = utils.createDatetime({ value: date, closeOnClickOutside: true });

utils.openDatepicker(component);
expect( component.instance().state.open ).toBeTruthy();
component.instance().setState({open: false});
expect( component.instance().state.open ).toBeFalsy();
utils.openDatepickerByClick(component);
expect( component.instance().state.open ).toBeTruthy();
});

it('increase time', () => {
let i = 0;
const date = new Date(2000, 0, 15, 2, 2, 2, 2),
Expand Down