QInput on iOS native requires two taps

[wooliet]

Software version

Operating System - Darwin(18.6.0) - darwin/x64
NodeJs - 8.11.3

Global packages
NPM - 6.7.0
yarn - Not installed
@quasar/cli - 1.0.0-rc.2
cordova - 9.0.0 (cordova-lib@9.0.1)

Important local packages
quasar - 1.0.0-rc.4
@quasar/app - 1.0.0-rc.6
@quasar/extras - 1.1.2

What did you get as the error?

No error information. Strictly UX related.

What were you expecting?

QInput elements on an iOS build seem to require two distinct taps to pull up the keyboard. The first tap gives it focus. The second tap then allows editing the text.

Expecting a single tap to both bring focus to the input and pull up the keyboard.

What steps did you take, to get the error?

Any QInput used in a native iOS build. Mobile web is not an issue. Android is not an issue.

Also: not an issue with our 0.17 iOS build.

[rstoenescu]

Hi,

Cannot reproduce. Tested both on the emulator and on a real device. Keyboard comes up on first tap.

You haven't specified your Quasar version (only @quasar/app version, but that's the App CLI). Please confirm quasar package is 1.0.0-rc.4.

[webnoob]

@wooliet I also experienced this issue, however, I can no longer reproduce it.
In addition to the information @rstoenescu has asked for, could you please also post the dependencies section of your src-cordova/package.json file.

I have a feeling that the following sorted it for me:

• npm install -g cordova
• cd src-cordova
• cordova platform remove ios
• cordova platform add ios

I can't be sure and please post your package.json data before trying this so we can see if it's an issue with cordova / cordova-ios version or not.

[wooliet]

Sounds like a good idea @webnoob. I will report back when we've worked through your steps and tested again.

Copied below are the dependencies as they stand now.

src-cordova/package.json

  "dependencies": {
    "cordova-android": "^8.0.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-ios-camera-permissions": "^1.2.0",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "phonegap-plugin-barcodescanner": "^7.1.2"
  },

[nothingismagick]

Maybe try with cordova 9

[wooliet]

@nothingismagick I double-checked and that is the version installed:

npm ls -g --depth=0 | grep cordova
├── cordova@9.0.0

[nothingismagick]

Also post the results of quasar info

…

[wooliet]

I've updated the info above with output of quasar info.

This is a tricky issue. The current behavior, on iOS native build, is definitely different from the 0.17 builds.

(And sorry for size of the gifs, could not find out how to get markdown to reduce displayed image dimensions).

Current

A quick tap of the input gives it focus only. A slightly longer tap gives it focus and keyboard.

0.17

A quick tap of the input gives it focus and keyboard.

[nothingismagick]

Also exactly what devices and what iOS are you using?

[wooliet]

vids above on iPhone SE running iOS 12.3.1. It was reproducible on iPhone X (same version).

[webnoob]

@wooliet Stab in the dark here - Is this an upgraded project from .17 to v1?
If so, does it happen with a brand new project creation using quasar create <your_proj> ?

[wooliet]

It is an upgrade from 0.17.

Yes, this happens with a straight out of the box quasar create.

src/pages/Index.vue

<template>
  <q-page padding>
    <q-list no-border>
      <q-item>
        <q-input
          filled
          v-model.trim="nameFirst"
          label="First name"
          stack-label
          class="fit"
        />
      </q-item>
      <q-item>
        <q-input
          filled
          v-model.trim="nameLast"
          label="Last name"
          stack-label
          class="fit"
        />
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
  data() {
    return {
      nameFirst: null,
      nameLast: null
    };
  }
}
</script>

[nothingismagick]

Possible related: ionic-team/ionic-v3#1012

[nothingismagick]

More likely related: apache/cordova-plugin-wkwebview-engine#86

And a potential fix:
https://www.npmjs.com/package/cordova-plugin-wkwebview-inputfocusfix

[webnoob]

Good catch - @wooliet Can you try this and see if it fixes your issue?

[nothingismagick]

This might be the issue - we aren't focussing on the same tick...

• you can call .focus() so long as its in the same tick as a user action. For example, you can call .focus() on an element synchronously in click event handler.

• you can call event.preventDefault() on the mousedown event to prevent the input from being blurred

From this PR: apache/cordova-plugin-wkwebview-engine#37

Also see this:
ionic-team/ionic-plugin-keyboard#274