QInput doesn't paste text on iOS

[k1dav]

trafficstars

Describe the bug My iPhone can paste text on q-input, can not paste on q-input with textarea type

Codepen/jsFiddle/Codesandbox (required) Test on Quasar Docs

To Reproduce Steps to reproduce the behavior:

1. Copy the text
2. Go to Standard
3. can paste text
4. Go to Textarea
5. can not paste text

Expected behavior With TextArea type or not should can all paste text

Screenshots First 10 Secs is i try q-input without "TextArea" or "AutoGrow" It Work

In the rest I try "TextArea" and "AutoGrow". It's not Work !!!!! https://user-images.githubusercontent.com/14539608/106578932-0ab5c700-657b-11eb-86a5-41ef162f07a0.mp4

Platform (please complete the following information): iOS: Safari, Chrome

Additional context Add any other context about the problem here.

[pdanpdan]

Hello.

It is very strange, because it only happens in the docs. If you open a codepen from textarea or autogrow examples then it'll work. Also, even in the docs it works sometimes.

I'll leave this open, maybe someone will figure it out.

[k1dav]

Hello.

It is very strange, because it only happens in the docs. If you open a codepen from textarea or autogrow examples then it'll work. Also, even in the docs it works sometimes.

I'll leave this open, maybe someone will figure it out.

I think it happens after quasar build ? Because I test on my site, also has the problem, and sometimes work, sometimes not work... So strange...

[pdanpdan]

Can you please test this to see if it fixes the problem?

in your app css file add this (SASS syntax here - please adjust to your case) .q-field &__native, &__input user-select: auto

[ajddev]

I was having this issue and I believe it had to do with how I was setting width of divs and perhaps the relationship to the grid system? Not completely sure.

The following code did not allow for pasting in iOS, but if you change width: 100vw to 99vw it works again.

Tapping the grid twice on iOS still brings up the paste option however.

<template>
  <q-page class="flex flex-center">
    <div class="row justify-center" style="width: 100vw">
      <div class="text-center col-12">
        <q-input outlined label="Textarea" type="textarea" />
      </div>
    </div>
  </q-page>
</template>