Reset styles when popper is calculating position

[MartijnCuppens]

Farewell style hack 👋

Fixes #32484

https://deploy-preview-32510--twbs-bootstrap.netlify.app/docs/5.0/components/dropdowns/#dropleft

[ffoodd]

I'm not sure why but the behaviour changed in RTL, translate() does not move horizontally anymore:

• This PR: https://deploy-preview-32510--twbs-bootstrap.netlify.app/docs/5.0/examples/cheatsheet-rtl/#dropdowns
• main: https://main--twbs-bootstrap.netlify.app/docs/5.0/examples/cheatsheet-rtl/#dropdowns

I can't see the relation with this PR though, but noticed it. Might be unrelated.

[septatrix]

Why do we remove the class again? When the element if positioned by popper the right property will not have an effect anyway or am I wrong?

[MartijnCuppens]

That's what I would expect too, but it turns out this is needed by popper.

[rohit2sharma95]

As per the comment written in the code here:

bootstrap/scss/_dropdown.scss

Lines 36 to 40 in 122b2bd

	// Reset positioning when positioned with Popper
	&[style] {
	right: auto#{"/* rtl:ignore */"} !important; // stylelint-disable-line declaration-no-important
	}
	}

This right style was added to reset the position when the dropdown is positioned with Popper. (This was not in V4 where Popper V1 is used)
I tried to create a raw dropdown only with native Popper. And found that I don't need to reset the position when the element is placed by Popper.

As per my research, if you remove the right style from the dropdown, it works fine (even when Popper is not used): https://bootstrap-1jtqi8bem.vercel.app/docs/5.0/components/dropdowns/

Or maybe I am missing something @twbs/css-review 🙂

Edit: Noticed that initially .dropdown-menu-end is shown on the left side here, but if you scroll the window it is placed fine:

[septatrix]

I tried to get rid of all the top/right/bottom/left styles which worker rather well except for the statically positioned examples (which do not use poppers dynamic positioning. It should work to only set these properties when [data-bs-display=static] matches or the element is inside a navbar (which are treated similar) however I do not have the time now to further experiment with this. Temporarily toggling the styles for popper however seems rather hacky (albeit appearing to work).

[rohit2sharma95]

Popper does not require the elements to have positioning styles and it can not place elements correctly that have positioning styles already.
https://codepen.io/rohit2sharma95/pen/wvzyGRM

It's not really something Popper aims to support, the requirement is that the target popper element should not be positioned already.

floating-ui/floating-ui#1206 (reply in thread)

[mdo]

Is this supposed to fix the dropdown-menu-end alignment at https://deploy-preview-32510--twbs-bootstrap.netlify.app/docs/5.0/components/dropdowns/#menu-alignment? I still see the broken menu...

[rohit2sharma95]

I still see the broken menu...

Because of the positioning of the dropdown initially.

[XhmikosR]

@rohit2sharma95 the issue mdo described above still happens. Was this supposed to be fixed by #32524?

[rohit2sharma95]

#32524 was just to remove the margin from the dropdown. The wrong placement of dropdown-menu-end is because of the positioning (right style) IMO

[mdo]

Opened #32986 as an alternative for now.

[mdo]

Closing for #32986.