USelect and UInputMenu don't support RTL language.

[ArbazIrshad]

Environment

• Operating System: Darwin
• Node Version: v22.9.0
• Nuxt Version: 3.16.0
• CLI Version: 3.22.5
• Nitro Version: 2.11.6
• Package Manager: npm@10.8.3
• Builder: -
• User Config: devtools, modules, i18n, ssr, runtimeConfig, app, css, vite, compatibilityDate
• Runtime Modules: @nuxtjs/i18n@9.3.1, @nuxt/ui@3.0.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.0-beta.4

Reproduction

Use any RTL language with USelect and UInputMenu component.

Description

Currently, both USelect and UInput Menu don't support rtl direction. The placeholder should be on the right side and the icon on the left side of the field.

In USelect, you can see that even the dropdown is not properly aligned according to language.

While the popover label are aligned properly for UInputMenu, the placeholder and arrow is still not in proper direction.

Same with these tags components, it's direction should be reversed too.

Additional context

No response

Logs

[benjamincanac]

@malik-jouda any hint on this?

[malik-jouda]

@benjamincanac @ArbazIrshad
This language is Urdu, and it is not on the list of supported languages.
https://ui.nuxt.com/getting-started/i18n/nuxt#custom-locale

<script setup lang="ts">
import type { Messages } from '@nuxt/ui'

const locale = defineLocale<Messages>({
  name: 'Urdu',
  code: 'ur',
  dir: 'rtl',
  messages: {
    // implement pairs
  }
})
</script>

<template>
  <UApp :locale="locale">
    <NuxtPage />
  </UApp>
</template>

Ensure dir: 'rtl' for proper direction.

[ArbazIrshad]

@malik-jouda Weird that it doesn't respect my default (RTL) direction that I have set in my header and I have provide it custom locale for it to work.

[malik-jouda]

@ArbazIrshad

https://reka-ui.com/docs/utilities/config-provider

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the ConfigProvider component to ensure all of the primitives adjust their behavior based on the dir prop.