Fix date range dropdown for RTL locales

[Aljullu]

Fixes second issue from #1776.

• Fixes date range dropdown alignment for RTL locales.
• Fixes calendar error tooltips positioning, until now they were not visible neither in RTL nor LTR locales.

Screenshots

Before:

After:

Detailed test instructions:

• Using a RTL language, go to any report.
• Open the date picker dropdown.
• Verify the dropdown is correctly aligned.
• Enter an invalid date.
• Verify the 'Invalid Date' popover is correctly positioned.
• Bonus points for testing there are no regressions in mobile and LTR languages.

[psealock]

Using Chrome and looking at a RTL language, the left inline style doesn't get overwritten:

It looks like the left: 50% !important; gets rewritten by the rtl plugin to right: 50% !important;. If I change it back to left: 50% !important; in the console, it works.

[Aljullu]

You're right! I tested it in Firefox and wrongly assumed it would work in other browsers too.

I made that CSS ruleset to be ignored by the RTL plugin, so it should work fine now in both browsers.

[psealock]

I'm not sure if this is a browser issue, but I noted an oddity with the left/right centering of the tooltip error message.

Thanks for tackling this! It works in non RTL as well. My calendar isn't rendering either, could that be related?

[Aljullu]

Thanks for the review @psealock. Can you take another look now? 🙂

My calendar isn't rendering either, could that be related?

Right, that's the last remaining issue from #1776. I'm trying to figure out what's going on there. I guess some CSS is interfering with react-dates, but I couldn't find yet what it is, so I don't know if both issues are related or they are something completely different.

[psealock]

LGTM!