Calendar closes when switching between months

[vinnyoodles]

Calendar closes when switching between months

[stefanomasini]

#92 my pull request might address this issue

[leyume]

@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

[vinnyoodles]

The bug doesn't come up in development

[vinnyoodles]

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

[vinnyoodles]

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

[vinnyoodles]

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.

[leyume]

@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?

[vinnyoodles]

@leyume Are you passing onChange as a prop?

[leyume]

Yes
<Calendar format={format} date={date} onChange={this.handleChange} closeOnSelect={true} />

handleChange( val ) { this.props.value( { value:val, name:this.props.name } ) }

[vinnyoodles]

Could you try deleting the closeOnSelect={true} from your Calendar component @leyume, this is just a hunch

[vinnyoodles]

And undo the addition to the if statement you made earlier, to see if my hunch would fix the bug

[leyume]

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)

[vinnyoodles]

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

[vinnyoodles]

My assumption is that when this is true, the calendar will disappear

 isVisible: this.props.closeOnSelect && isDayView ? !this.state.isVisible : this.state.isVisible

[leyume]

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

[vinnyoodles]

Can you test what happens if you made

isVisible: true

[leyume]

Tried that before no show
until I returned the function just before the "if condition"
THEN IT WORKED
Just wondering why or how

[leyume]

The problem now is
onChange not working with closeOnSelect

[xavibonell]

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?

[xavibonell]

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.

[stefanomasini]

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.