React-datepicker: There's a problem when the popup's position is "top".

[yy8597]

When clicking the button of increaseMonth and the height of the popup is change. The popup of Calendar will be moved when clicking the button again. So I can't fire 'increaseMonth()'.

You can reproduce the bug by scrolling page when pupup is in bottom of page.

[rafeememon]

Thanks for the report! Confirmed, I got the datepicker into a couple weird states

[taxigy]

I'm having the same problem. I put the DatePicker into a relatively positioned and constrained by width element, so the whole thing is

<div style={{display: 'block', position: 'relative', width: '200px', zIndex: 3}}>
  <DatePicker
    className='form-control datepicker'
    dateFormat='MM/DD/YYYY'
    popoverAttachment='bottom right'
    popoverTargetAttachment='top right'
    selected={moment(category.published_at)}
    onChange={::this.setPublishDate} />
</div>

It behaves this way:

[mdrx-io]

Having this problem as well. I've been playing around with the tether properties, but haven't come up with a combination that serves as a workaround. If anyone finds one, please lay it down here.

[sattaman]

+1 We're having the same issue

[bekerov]

[mb21]

Is there some option to force the popup to stay at "bottom" and never go to the top to avoid this bug? (I'm not sure what exactly popoverAttachment and popoverTargetAttachment do, but apparently not that...)

[rafeememon]

@mb21, see #470

[mb21]

@rafeememon thanks, this indeed seems to sidestep the issue:

  <DatePicker
    selected={ this.props.date }
    onChange={ this.props.handleChange }
    tetherConstraints={ [] }
    />

[d2berg]

Really like the component, any progress on this bug?

[rafeememon]

@hakonner, we're open to contributions to fix this

[d2berg]

So as already mentioned, this bug happens when the height of the calendar changes due to month change. The calendar's position does not reflect this (issue with tether component?). When the user clicks "next month", the position is moved (in correct direction). It seems like the tether reposition the calendar before the onclick is triggered, so we miss a onclick event and the calendar stays in the same month. After a couple of clicks the calendar has become correctly positioned and the component works as expected again.

The tether component is a bit complex, so haven't had the time to really understand it, but have tested a couple of things. If I delay _tether.position() execution in _updateTether, let's say 100ms and remove the for loop inside _move in TetherClass 2452
This seems to "fix" the problem, but I have no idea of what bi-effects this may give.

Also, the jump in the calendar can be a bit annoying to the user when flipping through several months. Another solution would be to have a max-height fix or something so the calendar would not change height, but take up a bit more space on the "lower" months. @rafeememon, how hard would this be to implement?

[jbccollins]

+1 Still an issue as of version ^0.33.0

[rpiaggio]

+1 we are having this issue too. Thank you!

[Grsmto]

Using fixedHeight prop solved that issue for me (well I'm happy with the behaviour).

[martijnrusschen]

We moved away from tether. Closing this as we're not using that lib anymore.

[Nandini26]

To avoid calendar shakes based on no.of weeks , we can use fixedHeight attribute.

<DatePicker fixedHeight selected={ this.props.date } onChange={ this.props.handleChange } />

[bionicpill]

This is still a bug even in the demo when the date picker is above the input box. Reproduce by shrinking your window until the date picker appears above the text input and then click back through the months and watch the calendar jump around.

[olleolle]

I added fixedHeight={true} option and it looks better

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.