UDropdown animation incorrect in RTL mode, scaling is LTR-oriented

[mmdfarajzadeh]

Environment

Nuxt: 4.3.1
NuxtUI: 4.6

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.6

Reproduction

app.vue

<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
 
const items = ref<DropdownMenuItem[]>([
  {
    label: 'Profile',
    icon: 'i-lucide-user'
  },
  {
    label: 'Billing',
    icon: 'i-lucide-credit-card'
  },
  {
    label: 'Settings',
    icon: 'i-lucide-cog'
  }
])
</script>
 
<template>
  <UApp dir="rtl">
    <UPageSection>
      <UDropdownMenu
        :items="items"
        :content="{
          align: 'start'
        }"
      >
        <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
      </UDropdownMenu>
    </UPageSection>
  </UApp>
</template>

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        lang: 'fa',
        dir: 'rtl'
      }
    }
  }
})

Description

The UDropdown component’s opening animation behaves incorrectly in RTL mode.

In an LTR project:

When align is set to start, the dropdown menu appears anchored to the left and scales open from left to right.
When align is set to end, the dropdown menu anchors to the right and scales open from right to left.
However, in an RTL project:

The menu’s position is correctly determined by the align prop (e.g., align: 'start' correctly positions it to the right in RTL).
The problem: The opening scale animation remains LTR-oriented. For align: 'start', which should logically scale from right to left in RTL, it still scales from left to right. This creates a visual inconsistency, especially when the width of the dropdown menu does not match the width of the trigger button.

Additional context

No response

Logs

nRS3g0gFLGGhjIUhK46ICNv4W1IoXoJhCmkMQOxs.mp4

[benjamincanac]

@malik-jouda Are you aware of this?

[al1maher]

You can override it by adding :ui="{ content: 'origin-top-right!' }"
You can even apply it based on dir if you'd prefer!

Try this and see if it works with you!

<template>
  <UApp dir="rtl">
    <div dir="rtl" class="flex">
      <UPageSection>
        <UDropdownMenu
          :items="items"
          :content="{
            align: 'start',
          }"
          :ui="{
            content: 'origin-top-right!'
          }"
        >
          <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
        </UDropdownMenu>
      </UPageSection>
    </div>
  </UApp>
</template>

[al1maher]

Also I guess the issue comes from RekaUI, especially in this css variable: --reka-dropdown-menu-content-transform-origin

[benjamincanac]

Thanks @malik-jouda! unovue/reka-ui#2610