Select component misaligned in RTL mode (PrimeVue Nuxt module)

[3aluw]

Describe the bug

I'm using the PrimeVue Nuxt module and encountered a strange behavior when switching my app to RTL mode.

The issue affects the Select component — the dropdown options list:

• Opens far away from the select component (on the opposite side of the screen), or
• Expands to take up more space than the select component itself.

As soon as I switch the document direction back to ltr, the issue disappears.

Expected Behavior:
The dropdown list should align properly under the Select component, regardless of document direction.

Actual Behavior:
Dropdown list misaligns or appears in the wrong position when dir="rtl" is active.

Additional Context:

• The issue doesn’t occur in LTR mode.
• Other components seem to behave normally.

Pull Request Link

https://stackblitz.com/~/github.com/3aluw/sakai-nuxt

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/~/github.com/3aluw/sakai-nuxt

Environment

• Nuxt: 3.14.159
• PrimeVue Nuxt module: 4.2.2
• Browser: Chrome
• Direction: RTL via useHead

Vue version

latest

PrimeVue version

4.2.2

Node version

20.19.1

Browser(s)

Chrome

Steps to reproduce the behavior

Steps to Reproduce:

1. open the provided link

2. open the two select dropdowns and observe misalignment.

3. comment useHead on app.vue to observe the disappearance of the issue

   useHead({ htmlAttrs: { dir: 'rtl' } })

Expected behavior

The dropdown list should align properly under the Select component, regardless of document direction.