feat(input, textarea): dir is inherited to native form control

[mehran-prs]

Issue number: resolves #30193 resolves #29577

---

What is the current behavior?

The dir attribute is not inherited by the inner form control. Developers need control over this attribute to provide important context to users, such as text direction.

What is the new behavior?

The dir attribute is a global attribute, so adding it as a property can cause issues. However, developers can still set it as an attribute, and it will be inherited by the native form control element. We also watch it, so any changes to the attribute will be inherited by the native form control.

Does this introduce a breaking change?

• Yes
• No

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 11, 2025 9:22pm

[mehran-prs]

@brandyscarney could you please review this PR?

[brandyscarney]

Hey @mehran-prs, thank you for the PR! Is there an associated issue that this resolves or a code example where I can see what it fixes?

[mehran-prs]

Hey @brandyscarney, Thanks for your reply.
Sure, it fixes the cursor position when you type in RTL languages on phones (tested on iPhone)
Let's say you have a native textarea without dir attribute (which its default will be ltr):

      <textarea></textarea>

when you type using RTL characters, your cursor position remains at the beginning (because of the default LTR value, it knows that the cursor should be at the right side of the text, but in RTL languages, it's wrong and should be at the left side):

We can fix it using dir attribute on it:

 <textarea dir="auto"></textarea>

Result:

[mehran-prs]

@brandyscarney could you please check my answer

[mehran-prs]

@brandyscarney

[brandyscarney]

Tested this using the following code and confirmed it is changing the text direction properly now:

<ion-input dir="auto" value="דת מיזמי בדפים משחקים."></ion-input>
<ion-input dir="rtl" value="דת מיזמי בדפים משחקים."></ion-input>
<ion-input dir="auto" value="This is a input"></ion-input>

<ion-textarea dir="auto" value="דת מיזמי בדפים משחקים."></ion-textarea>
<ion-textarea dir="rtl" value="דת מיזמי בדפים משחקים."></ion-textarea>
<ion-textarea dir="auto" value="This is a textarea"></ion-textarea>

Thank you for the PR @mehran-prs!

[thetaPC]

@mehran-prs Congrats for your first PR with us! This feature will be released soon!