Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove custom fallbackPlacements from the dropdown #32843

Merged
merged 2 commits into from
Feb 9, 2021

Conversation

rohit2sharma95
Copy link
Collaborator

@rohit2sharma95 rohit2sharma95 commented Jan 19, 2021

Closes #32648

Why to remove fallbackPlacements option from the dropdown:

  1. This restricts the flipping behavior of the dropdown to four directions only and it does not let the dropdown flip in the exact opposite side of the current placement.
  2. I believe that there should be an option in the dropdown's configuration to override the customized (by bootstrap) configuration of the popper. It is not available for fallbackPlacements right now.

Why to keep fallbackPlacements option in Tooltip/Popover:

Because it provides better placements to Tooltip/Popover IMO (Since there is no official special handing for the placement of Tooltip/Popover on the edges, like- dropstart and dropend for dropdowns). Popper's default value for fallbackPlacements is [oppositePlacement] it means:

If the popper has placement set to bottom, but there isn't enough space to position the popper in that direction, it will change the popper placement to top (opposite side). As soon as enough space is detected on the bottom, the placement will be reverted to the bottom side. But if the top placement doesn't fit (while Popper trying to flip the element), it reverts back to the original placement (to the bottom side even if there was not enough space in the viewport that made Popper try to flip the element). And this behavior causes the issue: #32384.

More in the description of #32437. So its better to have more fallback placements by default for Tooltip/Popover.


And the flip modifier can be added with fallbackPlacements by the popperConfig option in case the same issue like #32384 is caused with dropdowns as well (Which is rare in case of dropdowns IMO).

@XhmikosR XhmikosR force-pushed the rohit/main/dropdown-fallback-placements branch from 034253c to b30be68 Compare January 28, 2021 21:36
@XhmikosR
Copy link
Member

XhmikosR commented Feb 8, 2021

@mdo how do we proceed with this?

@mdo
Copy link
Member

mdo commented Feb 8, 2021

@XhmikosR @rohit2sharma95 I don't see the issue in #32648 in our production site at https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment. Should I be looking in a particular browser or OS?

@mdo
Copy link
Member

mdo commented Feb 8, 2021

Actually I just saw the issue in another PR on the RTL cheatsheet: https://deploy-preview-32986--twbs-bootstrap.netlify.app/docs/5.0/examples/cheatsheet-rtl/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Wrong fallback placement for dropdown
3 participants