Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

fix: dateInput onClose not called with last picked date #1109

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: dateInput onClose not called with last picked date #1109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Input/DateInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export default class DateInput extends React.Component {
componentDidUpdate(prevProps, prevState) {
this.setInputValue();
if (this.props.onClose && this.state.open !== prevState.open && !this.state.open) {
const value = this.props.value !== undefined ? this.props.value : this.state.value;
const value = this.state.value;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.state.value can be an empty string even if props.value is provided. Try it by opening the calendar and closing it without selecting a date and providing props.value.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can fix the issue I mentioned above by changing this line in the contructor:

- let value = props.defaultValue || '';
+ let value = props.value || props.defaultValue || '';

const date = this.props.parse(value, this.props.dateFormat);

if (date) {
Expand Down
124 changes: 113 additions & 11 deletions src/components/Input/DateInput.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import isToday from 'date-fns/is_today';
import frLocale from 'date-fns/locale/fr';
import startOfToday from 'date-fns/start_of_today';
import { mount } from 'enzyme';
import React from 'react';
import React, { useState } from 'react';
import sinon from 'sinon';
import Button from '../Button/Button';
import Icon from '../Icon/Icon';
Expand Down Expand Up @@ -159,11 +159,17 @@ describe('<DateInput />', () => {
});

describe('date picker', () => {
const callback = sinon.spy();
const component = mount(<DateInput onChange={callback} showOnFocus />);
let callback;
let onCloseCallback;
let component;

beforeEach(() => {
callback = sinon.spy();
onCloseCallback = sinon.spy();
component = mount(<DateInput onChange={callback} onClose={onCloseCallback} showOnFocus />);
});

it('should set date after clicking a date', () => {
callback.resetHistory();
const firstDate = component.find('Day').first();
const expectedDate = firstDate.props().day.date;
firstDate.simulate('click');
Expand All @@ -172,15 +178,13 @@ describe('<DateInput />', () => {
});

it('should call onChange after clicking a date', () => {
callback.resetHistory();
const lastDate = component.find('Day').first();
const expectedDate = lastDate.props().day.date;
lastDate.simulate('click');
assert(callback.calledWith(expectedDate, true));
});

it('should set date after clicking prev year', () => {
callback.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), -1);
const prevYear = component.find('Button.js-prev-year');

Expand All @@ -191,7 +195,6 @@ describe('<DateInput />', () => {
});

it('should set date after clicking next year', () => {
callback.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), 1);
const nextYear = component.find('Button.js-next-year');

Expand All @@ -202,7 +205,6 @@ describe('<DateInput />', () => {
});

it('should set date after clicking prev month', () => {
callback.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), -1);
const prevMonth = component.find('Button.js-prev-month');

Expand All @@ -213,7 +215,6 @@ describe('<DateInput />', () => {
});

it('should set date after clicking next month', () => {
callback.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), 1);
const nextMonth = component.find('Button.js-next-month');

Expand All @@ -230,7 +231,6 @@ describe('<DateInput />', () => {
});

it('should call onChange after clicking today', () => {
callback.resetHistory();
const today = component.find('footer Button').at(0);
today.simulate('click');
assert(callback.called);
Expand All @@ -246,7 +246,6 @@ describe('<DateInput />', () => {
});

it('should call onChange after clicking clear', () => {
callback.resetHistory();
const clear = component.find('footer Button').at(1);
clear.simulate('click');
assert(callback.calledWith('', false));
Expand All @@ -272,6 +271,109 @@ describe('<DateInput />', () => {
input.simulate('keydown', { key: 'ArrowRight', keyCode: 39, which: 39 });
assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
});

it('should call onClose when closing the date picker with the latest selected date in the current month', () => {
const toggle = component.find('InputGroup').find('Button');
toggle.simulate('click');

const initialDate = component.instance().getCurrentDate();
const isFirstOfMonth = initialDate.getDate() === 1;
const dayToPick = isFirstOfMonth ? component.find('Day').at(1) : component.find('Day').at(0);

const expectedDate = dayToPick.props().day.date;

dayToPick.simulate('click');
assert(onCloseCallback.calledOnce);
assert(onCloseCallback.calledWith(expectedDate, true));
});

it('should call onClose with the last selected date when we change the month', () => {
const toggle = component.find('InputGroup').find('Button');
toggle.simulate('click');

const nextMonth = component.find('Button.js-next-month');
nextMonth.simulate('click');

const tentativeIndexDayToPick = 15;
const tentativeDayToPick = component.find('Day').at(tentativeIndexDayToPick);
const dayToPick =
tentativeDayToPick.props().day.date.getDate() ===
component.instance().getCurrentDate().getDate()
? component.find('Day').at(tentativeIndexDayToPick + 1)
: tentativeDayToPick;

const expectedDate = dayToPick.props().day.date;

dayToPick.simulate('click');
assert(onCloseCallback.calledOnce);
assert(onCloseCallback.calledWith(expectedDate, true));
});
});

describe('date picker with value property', () => {
let onChangeCallback;
let onCloseCallback;
let wrapper;

beforeEach(() => {
onChangeCallback = sinon.spy();
onCloseCallback = sinon.spy();

const WrappingComponent = () => {
const [dateValue, setDateValue] = useState(new Date());

const onChange = (date, valid) => {
onChangeCallback(date, valid);
setDateValue(date);
};

return <DateInput onChange={onChange} onClose={onCloseCallback} value={dateValue} />;
};

wrapper = mount(<WrappingComponent />);
});

it('should call onClose when closing the date picker with the latest selected date in the current month', () => {
const toggle = wrapper.find('DateInput').find('InputGroup').find('Button');
toggle.simulate('click');

const initialDate = wrapper.find('DateInput').instance().getCurrentDate();
const isFirstOfMonth = initialDate.getDate() === 1;
const dayToPick = isFirstOfMonth
? wrapper.find('DateInput').find('Day').at(1)
: wrapper.find('DateInput').find('Day').at(0);

const expectedDate = dayToPick.props().day.date;

dayToPick.simulate('click');
assert(onCloseCallback.calledOnce);
assert(onCloseCallback.calledWith(expectedDate, true));
});

it('should call onClose with the last selected date when we change the month', () => {
const toggle = wrapper.find('DateInput').find('InputGroup').find('Button');
toggle.simulate('click');

const nextMonth = wrapper.find('DateInput').find('Button.js-next-month');
nextMonth.simulate('click');

const tentativeIndexDayToPick = 15;
const tentativeDayToPick = wrapper.find('DateInput').find('Day').at(tentativeIndexDayToPick);
const dayToPick =
tentativeDayToPick.props().day.date.getDate() ===
wrapper.find('DateInput').instance().getCurrentDate().getDate()
? wrapper
.find('DateInput')
.find('Day')
.at(tentativeIndexDayToPick + 1)
: tentativeDayToPick;

const expectedDate = dayToPick.props().day.date;

dayToPick.simulate('click');
assert(onCloseCallback.calledOnce);
assert(onCloseCallback.calledWith(expectedDate, true));
});
});

describe('date picker with controlled visible dates', () => {
Expand Down