[BUG] - reversed keyboard arrow when navigating the english text inside Input field at any rtl locale

[1Mouse]

HeroUI Version

v2.8.2

Describe the bug

arrow keys left and right are inverted leading to a confusing behavior when he enters email at an rtl language locale like ar-AE

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

https://storybook.heroui.com/?path=/story/components-input--label-placement&globals=locale:ar-AE

enter any english text at the link above and use keyboard arrows

issue is very clear

Expected behavior

navigate correctly with keyboard

Screenshots or Videos

No response

Operating System Version

linux

Browser

Chrome

[linear]

ENG-2710 [BUG] - reversed keyboard arrow when navigating the english text inside Input field at any rtl locale

[akane9506]

Sharing some findings:

I'm not sure if it is a browser-related bug.
I was trying to look into this issue by playing with the stying, direction, and language attribute on the input element in Chrome. However, when I switch to Safari, I found the input doesn't even change it's alignment when I set the language to Arabic.

[adi-ray]

This is directly related to #5553:
The <input> component isn’t allowing the browser to handle cursor direction natively 'coz dir attribute isn't being applied directly to the actual input element.

Note:

1. The original dir attribute must reach the underlying : The break in dir="auto" attribute’s propagation leads to unexpected results.
2. Any custom CSS should not suppress native browser handling which would break both visual alignment and keyboard navigation.