Overlay positions in RTL

[AbdullahHouso]

Describe the bug

When the website is RTL, any component with overlay (Select, Multiselect, Treeselect, Datepicker...) The RTL does not show exactly above the main component.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-kxyb596c?file=src%2FApp.vue

Environment

Tailwind V3/V4
Vue 3.5.13 + Nuxt 3.5.13
PostCSS 8.5.3

Note: The issue is also present on PrimeVue docs when changing the theme settings to RTL:
https://primevue.org/select/

Vue version

3.5.13

PrimeVue version

4.3.1

Node version

22.14.0

Browser(s)

No response

Steps to reproduce the behavior

Set HTML attributes to: (dir="rtl")

Expected behavior

The overlay must be in the correct position around the main component, as in the LTR case.

[AbdullahHouso]

I found out that there's a CSS value being assigned to the overlay of the component that is called (inset-inline-start). This value should define the position of overlay in the correct position. It works without issues in LTR. However, on RTL it does not.

In order to make the overlay take its correct position, the attribute in RTL must change from (inset-inline-start) to (inset-inline-end) without changing the value

Here's a workaround code that I put in my layout file to assign the value to the correct attribute name and clear the first one (My website is fully RTL):

onMounted(() => {
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === 1 && (node as HTMLElement).classList.contains('p-component')) {
                    const htmlEl = document.documentElement;
                    if (document.documentElement.getAttribute('dir') === 'rtl') {
                        const overlay = node as HTMLElement;
                        const startValue = overlay.style.insetInlineStart;
                        if (startValue) {
                            overlay.style.insetInlineEnd = startValue;
                            overlay.style.insetInlineStart = 'auto';
                        }
                    }
                }
            });
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    onBeforeUnmount(() => {
        observer.disconnect();
    });
});