Cannot select or copy text from ion-input

Question

I'm developing an app using ionic3, but when using it on android, I can't select text inside <ion-input>, <input>, <ion-textarea> or <textarea> tags.
When testing it in the browser, it works fine. However when I'm using it in android, tapping the input, long or short only toggles the keyboard and it's impossible to ever select text.

After extended researches, I realized that if my <ion-input> or <ion-textarea> is in an <ion-item> it works fine, and text can be selected and copied. For many design reasons, I don't want to have to put inputs in <ion-item> elements, because it creates many other problems in the app.

I think that the <ion-item> element must modify the behavior of sub-elements, like allowing copying text which is not permitted by default for other elements. So I wonder if I could reproduce that behavior without having to wrap inputs in <ion-item> elements.

I tried using this in my scss file but without success:

ion-input input, ion-textarea textarea, input, textarea {
  -webkit-user-select: auto;
  // I also tried -webkit-user-select: text;
}

If I do like so:

ion-input, ion-textarea {
  -webkit-user-select: auto;
  // I also tried -webkit-user-select: text;
}

I can select text, but not while inputing, I'm selecting the input itself.

What I want is simply to be able to select while inputing, copy, paste...

Any idea would be deeply appreciated :)

Integration

My suggestion is to use the ion-item and solve design issues after that. – Uthrop

@Uthrop I've rolled back to using ion-item, like I was doing before. It works that way, however brings other limitations to the app. I'd still really love to find a solution without having to use ion-item. – Integration

Answer 1

I have used it with ion-textarea with Ionic 7/Angular like so:

 <ion-item>
    <ion-textarea
       class="font-size-12 color-white opacity-1"
       disabled="true"
       rows="13"
       [value]="event?.payment?.payDetails"
     ></ion-textarea>
  </ion-item>

Ref: https://github.com/ionic-team/ionic-framework/issues/11438#issuecomment-298231771

Uthrop