Position cursor in textarea

Ionic Framework ionic-v3
1

Somebody Help :sob:!!!
I can’t position cursor to edit text in the textarea neither can I paste the text area after long-pressing withing it.

Let say I have a text Hello there, kindly help I can’t drag the cursor to any position. The cursor is always in the end. I have to clear back to where I want to edit.

The current behavior is when I tap to position I want the cursor to be, the keyboard closes, and while the keyboard is closed If I try to tap the cursor to a position keyboard opens again.

Below is my markup

<form [formGroup]="messageForm" (ngSubmit)="sendMessage()">
    <ion-toolbar color="chat-input-toolbar">
      <ion-textarea formControlName="message" [(ngModel)]="messageForm.value.message" name="message" placeholder="Type message..." autosize></ion-textarea>
      <button type="submit" clear [disabled]="messageForm._pristine || messageForm._status == 'INVALID' || !socketStatus" ion-button
        icon-only right class="send-btn">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-toolbar>
  </form>

Below is my current projects details in case its needed

Ionic Framework: 3.3.0
Ionic Native: ^2.9.0
Ionic App Scripts: 1.3.7
Angular Core: 4.1.2
Angular Compiler CLI: 4.1.2
Node: 7.5.0
OS Platform: Windows 8
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Mobile Safari/537.36

Kindly help with any suggestion/solutions. Thanks in advance

3

hi @zeta

to prevent the keyboard close you can do the following:
(click)="$event.preventDefault();"
add this to every element you can click
and add this to your text area contenteditable="true"
and try out to use text area with custom CSS instead of ion-textarea

1 Like
4

this behavior is fixed by wrapping the ion-textarea inside an ion-item. check out discussion here: ion-textarea and ion-input - can not move cursor in text · Issue #9960 · ionic-team/ionic-framework · GitHub