Force otp input direction to LTR

[3adeling]

Fix OTP input direction in RTL layouts

Problem

In RTL layouts (e.g. Arabic), the <flux:otp> component inherits the page's dir="rtl" direction, causing the OTP input slots to render and receive focus from right-to-left. Since OTP codes are always sequential left-to-right values, this results in a confusing UX where the user fills the code "backwards" relative to what the server expects.

Solution

Add dir="ltr" directly on the <ui-otp> element to explicitly lock the input direction regardless of the surrounding layout direction.

<ui-otp
    {{ $attributes->class($classes) }}
    data-flux-otp
    data-flux-control
    role="group"
    dir="ltr"
    data-flux-input-aria-label="{{ __('Character {current} of {total}') }}"
>

Why this approach

• OTP codes (numeric/alphanumeric) are inherently LTR sequences — this is consistent with how native <input type="tel"> and browser autofill handle OTP on RTL pages
• The fix is scoped to the component container only, so the surrounding RTL page layout is unaffected
• No JavaScript or CSS overrides needed — a single HTML attribute is sufficient

Testing

Verified on an Arabic (dir="rtl") page: input slots render left-to-right, focus advances correctly from left to right on each keystroke, and browser OTP autofill populates in the correct order.

[ganyicz]

Hi @3adeling

Thanks for reporting! I have submitted a separate PR to Flux Pro that removes RTL from OTP input entirely, including the javascript part, removing the need to set it on the HTML input.