Popover component: "shift" prop with placement: left/right doesn't behave as expected

[albanyacademy]

Description

edited. Misunderstood the purpose of "shift" and mixed it up with "flip". Still was curious about the behaviour.

Playing around with it more, it seems the issue has more to do with some interaction between the "resize" prop and the "shift" prop. resize is default to true, and when only setting shift to true, it causes the popover to try to resize and shift? which obviously doesn't really work out quite that well... it seems like it best behaves when only one is set, so i think the docs should at least be updated to indicate that they're not intended to be used together (and that if you're setting shift to true, you should also probably set resize to false).

Example from storybook:
https://github.com/user-attachments/assets/2b0ed5c7-49ed-484d-aee4-f1262d62c627

Step-by-step reproduction instructions

1. use popover component in storybook
2. set shift to true
3. experiment with placement and scroll so that the popover would extend beyond the viewport. observe that left/right fail to properly align themselves in a vertical context.

Screenshots, screen recording, code snippet

2025-01-08_14-02-00.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Rishit30G]

Thanks for sharing the issue,
Sharing some more insights on this issue with the help of screencast:

Screen.Recording.2025-01-09.at.10.03.07.AM.mov

Results

resize: true and shift: false

• Resizing happens but shift doesn't happen

resize: true and shift: true

• Resizing happens but shift doesn't happen ( Problematic )

I think the docs should at least be updated to indicate that they're not intended to be used together

Seems like a viable solution, but would seek maintainer's insights before raising a PR for this 🙇🏻

resize: false and shift: true

• Resizing doesn't happen but shift happens

resize: false and shift: false

• Resizing doesn't happen and shift also doesn't happen

[himanshupathak95]

Hey @albanyacademy, I was able to reproduce the same -

Screen.Recording.2025-01-09.at.10.25.04.mov

And as correctly mentioned, the issue arises when the resizing and shift happen togehter.