instructure
Popover doesn't respect placement prop
Background Information
Package Version(s): ui-popover v8.51.0
Browser: Chrome (All Versions) Safari (All Versions)
OS: MacOS 14.1.2
Device: Macbook Pro
Component: Popover
Describe the Bug
Popover doesn't respect placement property. See Steps To Reproduce.
Steps To Reproduce
1. Go to my minimal reproducible example: https://codesandbox.io/p/sandbox/busy-murdock-q3rwyy?file=%2Findex.js
2. Click on 'Sign In' to open the Popover
3. Reduce window size, and around the width of the Popover, the placement changes from 'bottom start' to 'bottom center'
4. On such small Popover this doesn't seem like a big issue, but the same exact behaviour is present with bigger Popover content; around the width of the content, the placement changes.
Expected Behavior
Placement prop is respected
Screenshots
https://github.com/instructure/instructure-ui/assets/125990622/eca4518f-3033-4355-a0e2-9887d8ca9300
Additional Information
Current Workaround(s): Doesn't seem like it
Products Affected:
Are you willing to submit a PR to fix?
- [ ] Yes, I'm willing to submit a PR
Requested Priority: Normal
I think the behaviour is intended: the popover tries to fit to the space best it can. We'll take a look if we can improve on this in any meaningful and non breaking way and get back to you
Hmm, is this an intended behaviour?
If I don't add the placement="bottom start" property, it displays normally, but if I add it, the above weirdness happens.
Well, no :D This really isn't the intended way. Thanks for the good examples, we'll look into it and keep you posted