Next/Previous month position styling is not applied when passing a custom icon

react-dates version react-dates@18.4.1

Describe the bug When passing custom arrows, the position styling is not applied. In previous versions (I’m upgrading from 16.x to 18.4.1, so I’m not sure how far back this changed) the custom icon would still have the position set to the same as the default arrow icons. This would be less of an issue if there was a good way to select the individual DayPickerNavigation_button divs, but the only way that I could select them individually was with :nth-of-type. Also, if I position the icons themselves, I lose the focus states that the DayPickerNavigation_button divs handle, and if I also handle that myself, the tab index gets thrown off.

Source code (including props configuration) This issue can be seen in the Storybook Documentation Example for custom icons

Screenshots/Gifs Storybook Documentation Example for custom icons

Desktop (please complete the following information):

• OS: Mac OS X
• Browser: Chrome
• Version 71

Smartphone (please complete the following information):

• Device: NA
• OS: NA
• Browser NA
• Version NA

Is the issue reproducible in Storybook? Storybook Documentation Example for custom icons

[Kvek]

Is there an update on this issue?

[derekaspaulding]

@ljharb It looks like the change happened in the 17.0.0 release. There was another slight change with the 17.2 release, and that is still the current behavior. I removed all my other custom styles and took some screenshots of the different versions

16.7.1 - This version is good

17.0.0 - 17.1.1

17.2.0 - 18.5.0