QInputs with autogrow enabled don't work on Cordova iOS

[skmbr]

What happened?

Either I can't focus on them at all or they sort of half focus and the keyboard appears, but no cursor is visible and whatever I type goes in backwards! ie. each keypress is added to the beginning of the value!

They work fine with autogrow removed.

What did you expect to happen?

For the input to behave normally and autogrow to work when required.

Reproduction URL

n/a

How to reproduce?

Add autogrow to a QInput
Build for iOS and run on device.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Cordova Mode

Platforms/Browsers

iOS

Quasar info output

Operating System - Darwin(21.4.0) - darwin/x64
NodeJs - 16.2.0

Global packages
  NPM - 7.13.0
  yarn - 1.22.18
  @quasar/cli - 1.3.0
  @quasar/icongenie - 2.3.3
  cordova - 11.0.0

Important local packages
  quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - Not installed
  vuex - 4.0.2 -- state management for Vue.js
  electron - 7.3.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.2 -- Babel compiler core.
  webpack - 5.73.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.8.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @skmbr! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[skmbr]

The same behaviour also occurs when the QInput is type="textarea" WITHOUT autogrow.

[skmbr]

Has anyone else experienced this or have any workaround suggestions?

This and #13619 are now preventing me putting out a new release, so I'm about to start looking into building my own textarea and dialog components :(

[skmbr]

I discovered this ten year old stackoverflow post that seemed relevant...

https://stackoverflow.com/questions/11568239/cant-edit-input-type-text-or-textarea-with-cordova-1-9-0-and-android-jelly-be

...and to my surprise, adding -webkit-user-select: auto !important to the QInput input-style seems to be working.

I find it hard to believe that textareas haven't worked out of the box on Cordova/iOS for over a decade, but it certainly seems that way 🤷‍♂️

Will do some more testing, but maybe adding this should be considered for QInput if there are no other side effects?

[pdanpdan]

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

• remove your fix
• in your app css file add this (SASS syntax here - please adjust to your case)

.q-field
  &__native, &__input
    user-select: auto

I want to check if this can be fixed without !important

[skmbr]

@pdanpdan Yep, that works! 👍

[rstoenescu]

This has been fixed long ago. Forgot to close the ticket.