Polaris-react: [Date picker] Keep arrow position consistent

[markiiikram]

Issue summary

Issues found by @loic-d:
Hey! I noticed something a bit annoying with the React DatePicker.

In Polaris Rails, we were able to quickly navigate between months using the arrows. The arrows are always staying in the same position so you can just quickly click. (See GIF)

In React, it's not consistent and sometimes the arrows 'jump', depending on how many days we have in a month. So you need to move the mouse on the arrow again and click. It's a bit frustrating when you want to select dates in the past or future.

Polaris atc @markiiikram,

Expected behavior

Want the arrows to stay in the same position, when clicking through months

Actual behavior

Date picker jumps around depending on number of days in a month

Specifications

• Are you using the React components? (Y/N):
• Polaris version number: 2
• Browser: guessing chrome
• Device: guessing macbook pro
• Operating System: guessing high sierra

---

⚓️ We’re not accepting pull requests at this time

🗒 We _are_ accepting issue reports and feature requests

🌟 Feature requests that we can’t get to right away will be closed. However, we track all requests and will use it to set priorities. See the contribution guidelines for more information.

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

[ruairiphackett]

@markiiikram @loic-d I tried reproducing this issue, but had trouble, do you have any more information on how to reproduce?

[loic-d]

The issue is only reproducible when the DatePicker is displayed in a Popover (on top of the activator) I believe.
You can see it in production on the automatic discounts creation page admin/discounts/automatic/new.

[ruairiphackett]

@loic-d It looks like it might be due to the position in which the DatePicker is shown, i.e. either above or below the date input, and not down to different behaviour in react vs. rails.

I rendered admin/discounts/automatic/new in rails and had the same issue:

It looks like there's a comment section in the 'expected behaviour' example above that means there is enough space for the DatePicker to appear below the date input & when this happens the height of the Popover extends down (instead of up) when it needs more space to display the dates, meaning the arrows don't move when changing months.

Here's an example rendered in react where the Popover has enough space to be displayed below the input:

[loic-d]

Thanks for looking into it. Let's close the issue since it's not directly related to DatePicker.