Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v9.x, v8.x

Current Behavior

When a value is assigned before the first render, setFocus() places the caret at the beginning of ion-textarea, but at the end of ion-input.

Expected Behavior

Initial caret positioning should be consistent with ion-input, without overriding an existing selection on subsequent focus calls.

Steps to Reproduce

1. Create an ion-input and an ion-textarea, both initialized with "Hello world".
2. Once rendered, call setFocus() on the ion-input: the caret appears at the end.
3. Call setFocus() on the ion-textarea: the caret appears at the beginning.

Code Reproduction URL

https://stackblitz.com/edit/dgbjpfha

Ionic Info

Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.7.11
@angular-devkit/build-angular : 20.3.13
@angular-devkit/schematics : 20.3.15
@angular/cli : 20.3.15
@ionic/angular-toolkit : 12.3.0

Additional Information

Workaround

Explicitly position the caret after focus:

await textarea.setFocus();
const nativeTextarea = await textarea.getInputElement();
nativeTextarea.setSelectionRange(nativeTextarea.value.length, nativeTextarea.value.length);

Suggested Fix

In textarea.tsx, the native textarea receives its value as a text child, whereas input.tsx uses the native value property:

<textarea>{value}</textarea>

Use the same property-based approach as ion-input, keeping all other attributes unchanged:

<textarea value={value} />

We tested this change in the installed Ionic 8.7.11 bundle (@ionic/core/dist/esm/ion-textarea.entry.js): add value: value to the native textarea properties and remove the value child argument.

In an isolated browser test without the workaround, the caret then starts at 7, and an existing selection survives an unrelated render. The patch also resolved the reported application behavior.