Incorrect date direction and input order in UInputDate component with fa-IR locale

[mmdfarajzadeh]

Environment

Nuxt: v4.3.1
NuxtUI: v4.7.1

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.3.1

Reproduction

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

const date = ref(null)
</script>

<template>
  <UApp :locale="fa_ir">
    <UContainer class="py-8">

      <UInputDate v-model="date" locale="fa-IR" class="w-xs">
        <template #trailing>
          <UPopover>
            <UButton
              color="neutral"
              variant="link"
              size="sm"
              icon="i-lucide-calendar"
              aria-label="Select a date"
              class="px-0"
            />
            <template #content>
              <UCalendar v-model="date" locale="fa-IR" />
            </template>
          </UPopover>
        </template>
      </UInputDate>

    </UContainer>
  </UApp>
</template>

Description

When I set the project’s locale to fa-IR, the directionality changes to RTL, which is expected. In the UInputDate component, when the locale is set to fa-IR, it correctly switches to the Jalali calendar.

The issue arises when I use the Tab key to navigate between the day, month, and year inputs. The navigation direction is from right to left, which is correct for an RTL layout. However, when I manually enter a date, the automatic switching of focus/cursor moves from left to right (as shown in the attached video).

Currently, the order of date input fields follows a Year > Month > Day sequence. However, in the Jalali calendar system (and Persian UI standards), the convention is to start with the Day, followed by the Month, and finally the Year. This difference in expected input order causes an inconsistency in focus behavior when moving between fields. I believe that updating the input sequence to Day > Month > Year will not only align with Persian standards but also resolve the automatic focus-switching issue.

Additionally, there was a minor, unrelated issue where the display of the month name and year in UCalendar was initially reversed (Year first, then Month). This has been resolved by setting heading to ltr in app.config.ts.

bandicam.2026-05-02.10-49-41-622.mp4

Additional context

No response

Logs