dropdown-menu-end in RTL

[ferhado]

In RTL .dropdown-menu-end has wrong position

.dropdown-menu-end {
    right: 0;
    left: auto;
}

It should be

.dropdown-menu-end {
    right: auto;
    left: 0;
}

[ffoodd]

Would you mind providing a reduced test case showing the issue please?

For now both .dropdown-menu-* positions are ignored from RTLCSS because Popper takes care of positioning for us (using CSS translate() function), and it works as intended in RTL too (the latest dropdown line, with a single dropdown, shows a .dropdown-menu-end demo, successfully right aligned).

So AFAIC this works fine, despite the counter-intuitive CSS.

[ferhado]

Here is an example showing the issue: https://codepen.io/ferhado/pen/bGqrBmx

The comment says /* rtl:ignore */ , but nothing changes.
Here is a screenshot of both LTR and RTL:

LTR: https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css#L3465
RTL: https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.rtl.css#L3463

[ffoodd]

/* rtl:ignore */ precisely says to not change this. That's its purpose.
So it might only be some forgotten rules, since dropdowns have been refactored quite a lot recently.

@twbs/js-review I recall Popper was messing around: dropdowns in navbar don't use Popper, but they still get [data-bs-popper="none"] which matches our current selectors. Is that intended? Should we stop ignoring them from RTLCSS, finally?

I'll open a small PR to test this.

[rohit2sharma95]

[data-bs-popper="none"] is intended @ffoodd, it means that dropdown is not handled by the Popper and should be handled by the CSS only (in case of RTL as well). [data-bs-popper] selector is used for two situations: when the dropdown is static ([data-bs-popper="static"]) or placed inside the navbar ([data-bs-popper="none"]).

[ffoodd]

So we're safe to remove the RTL ignore part :)