Ionic-framework: ion-textarea and ion-input - can not move cursor in text

[pdrosos]

Ionic version: (check one with "x")
[ ] 1.x
[x] **2.0.0-rc.4

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Issue is the same, as described here (includes video) - https://forum.ionicframework.com/t/ion-textarea-iphone-cannot-move-cursor-in-text/72347
It happens in iOS 10.1.1 and Android 5 for ion-textarea and in iOS only for ion-input.
Difference in Android and iOS for ion-textarea is that cursor is positioned at the beginning of the text in iOS and at the end in Android.
I am not entirely sure when this issue appeared, seems like it wasn't present in older Ionic 2 RC releases.
Moving the cursor in ion-input inside a form is also hard and not always possible in iOS.

Edit: when ion-textarea is inside ion-list and ion-item, moving cursor seems to work:

<ion-list>
  <ion-item>
    <ion-textarea rows="6"></ion-textarea>
  </ion-item>
</ion-list>

Expected behavior:

I expect to be able to move the cursor inside ion-textarea and ion-input and easily edit content.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v7.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hello, thanks for using Ionic! Could you test this with the latest nightly (npm install ionic-angular@nightly --save`) please?

[pdrosos]

@jgw96 it's still the same with the nightly.

[jgw96]

Thanks for testing @pdrosos ! So real quick, the ion-textarea (and ion-input) should always be in an ion-item as it is shown in our docs. Sorry that i did not mention this earlier, i just saw that part of your message. WIth ion-input and ion-textarea inside an ion-item does this work for you?

[pdrosos]

@jgw96 yes it works inside ion-item. I also didn't know if it's mandatory to be like that. Thanks for clarifying it! I will close this one.

[ramoncarreras]

Hi @jgw96, I'm experiencing this same issue.

Simply, I copied the example on the ionic input documentation inside a blank app and I'm not able to move cursor in text.

<ion-content padding>

    <ion-list>

        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password"></ion-input>
        </ion-item>

    </ion-list>

</ion-content>

I'm trying this in 10.3.2 iOS real iPad and in iPhone 6S emulator.

My system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v7.1.0
Xcode version: Xcode 8.3.2 Build version 8E2002

Can you help me, please?

[gkTim]

I'm still getting this error in an ion-textarea with ion-input it works correctly.

Ionic Info

cli packages: (/Users/timingensiep/Development/StarterAndKicker/app/node_modules)

    @ionic/cli-utils  : 1.14.0
    ionic (Ionic CLI) : 3.14.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.2
    ios-sim    : 5.0.4
    Node       : v8.6.0
    npm        : 5.4.2
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235

Misc:

    backend : pro

I'm having a component which is displayed in a ion-list which contains the textarea.

Component HTML (textarea-section-item):

<ion-item-divider color="divider" margin-top text-wrap>
  <b>{{title}}</b>
  <span *ngIf="maxchars !== 10000">({{textarea.value.length}} / {{maxchars}})</span>
</ion-item-divider>

<ion-item color="skgray">
  <ion-textarea #textarea placeholder=">>" [attr.maxlength]="maxchars" [disabled]="disabled"></ion-textarea>
</ion-item>

Page HTML:

<ion-header>

  <ion-navbar color="starter">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>PAGE</ion-title>
  </ion-navbar>

</ion-header>

<ion-content no-bounce>

  <ion-list padding-top no-lines>

    <form [formGroup]="form" (submit)="update()">

      <textarea-section-item formControlName="shortDescription" [title]="'short description'"
        [maxchars]=75>
      </textarea-section-item>

      <button ion-button full type="submit">Done</button>

    </form>

  </ion-list>

</ion-content>

When I focus the textarea the cursor is at the beginning of the text and not on the end.

Am I doing something wrong?

[fdambrosio]

this works

<label>Text</label>
<ion-list>
  <ion-item>
    <ion-textarea [attr.rows]="3"></ion-textarea>
  </ion-item>
</ion-list>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.