Datepicker overflows out of viewport

[rubenswieringa]

(lmk if this is intended behavior; I couldn’t find this in breaking changes)

Describe the bug Datepicker doesn’t automatically get contained within the viewport anymore.

To Reproduce Steps to reproduce the behavior:

1. Add a datepicker with no properties on the left- or rightmost side of the viewport:

   <Datepicker />

2. Ensure input-field is less wide than datepicker, for example:

   .react-datepicker-wrapper input {
     width: 20px
   }

3. Click input-field to open datepicker

Expected behavior In older* versions, the datepicker would automatically stay within the bounds of the viewport.

* Admittedly I was on a very old (v4) version before updating to v7 just now. I’m not sure what the default behavior was in v5 or 6.

Screenshots

Workaround Give a value to the popperPlacement property:

<Datepicker popperPlacement="bottom-end" />

Note that only "popperPlacement="bottom" won’t keep the datepicker from overflowing horizontally.

Versions

• react-datepicker 7.0.0
• MacOS 14.5
• Firefox 126 & Chrome 124

Additional comments

Great work on the new major release guys, I’m sorry to be the first to open a ticket (and so soon).

[yuki0410-dev]

@rubenswieringa (@martijnrusschen) react-datepicker was changed in some version of v4-v6 to rely on floating-ui instead of popper. Because the detailed behavior can be controlled by the popperModifiers props, Why not use shift? https://floating-ui.com/docs/shift

If it doesn't work, please provide some sample code and I may be able to advise otherwise.

[rubenswieringa]

@yuki0410-dev That did the trick – thanks for the quick reply (and sorry for my late one). Will close this issue now.