React-dates: Orientation prop buggy

[StrikoMirko]

Hi guys,

I'm experiencing some buggy behaviour with the orientation prop.
What I needed logic that will re-render the DateRangePicker if the window gets resized, this is for mobile rotation. So if a user is on landscape mobile and rotates it to normal then DateRangePicker should re-render and display itself in 'vertical' orientation and vice versa.
My threshold is 600 width.
DateRangePicker re-renders correctly when i resize the window under 600 width and the orientation is horizontal but when I start to expand the window over 600 and DateRangePicker should now re-render from vertical to horizontal then the component breaks, actually it renders just a border with the rest of it invisible.

Basically the component breaks if you dynamically change the orientation prop from vertical to horizontal. I do this as a listener on window.resize.

I would appreciate if anyone could check this.

Thank you.

[jzhang300]

I'm trying to do what you're doing basically and am experiencing same issue. When the orientation changes on window resize, the absolute positioning of the datepicker component does not properly update:

[jzhang300]

Also when changing orientation from vertical to horizontal when app is running, the background of the date component disappears.

A temporary fix is to give .transition-container min-height: 313px;:

[majapw]

I will look into this. I think that switching from landscape to portrait on a phone is a compelling argument to support resizing properly.

@jzhang300 @StrikoMirko Both of you are changing the orientation from vertical in portrait mode to horizontal in landscape mode, correct?

[StrikoMirko]

Yes correct. When changing from horizontal to vertical then the calendar is rendered normally but from vertical to horizontal breaks it.

[jzhang300]

Transitioning from both vertical to horizontal and horizontal to vertical have their own issues. From horizontal to vertical, the positioning of calendar may not be correct. From vertical to horizontal, the background of the calendar disappears because .transition-container has 0 height.

[piotrkosytorz]

Is there is a plan to debug it, or has anyone come up with a fix?

[majapw]

I think https://github.com/airbnb/react-dates/pull/446 should address this issue but it's been stagnant for a while. I can take it over and try to do a release this week.