Closed vinnyoodles closed 8 years ago
@stefanomasini the issue still persist.
try it out by enabling closeOnSelect
<Calendar format={format} date={date} closeOnSelect={true} />
When you click the next or previous arrow, it closes the popup
The bug doesn't come up in development
Found the issue
setDate = (date, isDayView) => {
if (this.checkIfDateDisabled(date)) return
this.setState({
date,
inputValue: date.format(this.state.format),
isVisible: this.props.closeOnSelect && isDayView ? !this.state.isVisible : this.state.isVisible
})
prev = () => {
let prevDate = this.props.date.clone().subtract(1, 'months')
if (this.props.minDate && prevDate.isBefore(this.props.minDate, 'day')) {
prevDate = this.props.minDate
}
this.props.setDate(prevDate)
}
It's calling setDate
without the isDayView
parameter so it is undefined, so the boolean expression this.props.closeOnSelect && isDayView
will always return false
I made a simple fix for it, where if isDayView
is undefined then the boolean expression will only depend on the value of this.props.closeOnSelect
which is how it should be
I'm not sure why this bug didn't come up in development but I was able to recreate the bug if I manually set isDayView = false
inside of the setDate
function.
@vinnyoodles thanks for the pointers, but for some reason it didn't work for me that way and I see the problem in development
was able to solve it by adding && !_this2.props.closeOnSelect
to the if (_this2.props.onChange)
` this.setDate = function (date, isDayView) { if (_this2.checkIfDateDisabled(date)) return;
_this2.setState({
date: date,
inputValue: date.format(_this2.state.format),
isVisible: _this2.props.closeOnSelect && isDayView ? !_this2.state.isVisible : _this2.state.isVisible
});
if (_this2.props.onChange && !_this2.props.closeOnSelect) {
_this2.props.onChange(date.format(_this2.state.computableFormat))
}
}; ` Do you know why the onChange prop is closing the popup?
@leyume Are you passing onChange
as a prop?
Yes
<Calendar format={format} date={date} onChange={this.handleChange} closeOnSelect={true} />
handleChange( val ) { this.props.value( { value:val, name:this.props.name } ) }
Could you try deleting the closeOnSelect={true}
from your Calendar component @leyume, this is just a hunch
And undo the addition to the if statement you made earlier, to see if my hunch would fix the bug
But removing the closeOnSelect={true}
does not allow the popup to close when you select a date
Remember, the purpose of that is to close the popup when a date is selected (not when the prev or next are clicked)
I agree, that means my original bug fix is incorrect because in my situation closeOnSelect=undefined
for me, therefore the boolean value would equal false
but in your situation the boolean value would be true
. So I just wanted to see what would happen if we made it false
My assumption is that when this is true, the calendar will disappear
isVisible: this.props.closeOnSelect && isDayView ? !this.state.isVisible : this.state.isVisible
Well so I thought
But it didn't. The problem is with the "if condition" after the "setState"
if (_this2.props.onChange)
even with isDayView as undefined
Can you test what happens if you made
isVisible: true
Tried that before no show until I returned the function just before the "if condition" THEN IT WORKED Just wondering why or how
The problem now is onChange not working with closeOnSelect
Hi, great module for calendar, simple but customizable enough. Just have run across this issue though. Is there any prevision of fixing this bug any time soon on the master branch?
Found the issue on setDate function (line 362 on the compiled version). I fixed it by removing this line of code:
var isDayView = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
(line 363)
and adding the parameter to the setState function:
this.setDate = function (date,isDayView) {
(line 362)
The thing is, that setDate was already being called on day cell click with that parameter, I don't really understand the logic behind the arguments length check, I tested the other functionalities and it seems that it was kinda pointless, am I missing something here?
Well it's working fine for me now, thanks anyway.
This is probably similar to my original fix: https://github.com/Rudeg/react-input-calendar/pull/92/files#diff-1fdf421c05c1140f6d71444ea2b27638L46
The pull request was never accepted because the tests were broken, and I never had the time to figure out how to run them. Since I'm using a different library now, I dropped the ball. But the fix is there. Someone just needs to fix the tests and merge it into master.
Using the left and right arrows, the calendar popup closes on click of one of the arrows