[v0.17] iOS app crash when submitting a form with Go button

[maiolica]

Software version

Quasar:
Operating System Darwin(18.2.0) - darwin/x64
NodeJs 10.15.0

Global packages
NPM 6.7.0
yarn 1.15.2
quasar-cli 0.17.24
vue-cli 3.5.1
cordova 8.1.2 (cordova-lib@8.1.1)

cordova-ios 4.5.5

Important local packages
quasar-cli 0.17.24
quasar-framework 0.17.20
quasar-extras 2.0.9
vue 2.5.17
vue-router 3.0.1

Code

This is my Login.vue component:

  <q-layout>
    <q-page-container>
      <q-page class="flex flex-center column">
        <form @submit.prevent>
          <q-field label="Username">
            <q-input v-model="username" />
          </q-field>
          <q-field label="Password">
            <q-input
              v-model="password"
              type="password"
            />
          </q-field>
          <div class="form__buttons">
            <q-btn
              type="submit"
              label="Login"
              @click="submit"
            />
          </div>
        </form>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  name: 'Login',

  data() {
    return {
      username: '',
      password: '',
    };
  },

  methods: {
    submit() {
      this.$router.replace({ name: 'test' });
    },
  },
};
</script>

What did you get as the error?

The iOS app crash, the console shows this error:
assertion failed: 18D109 16B91: libxpc.dylib + 79599 [F7D4B188-D5C2-3E5E-BB76-BC7C6A368166]: 0x7d

What steps did you take, to get the error?

quasar dev -m cordova -T ios --emulator="iPhone-X,com.apple.CoreSimulator.SimRuntime.iOS-12-1"

If I tap the Login button everything is working fine, if the keyboard is showing and I press the "Go" button to submit the form, the app crash.

I've found this very similar issue on StackOverflow:
https://stackoverflow.com/questions/54598617/ios-12-vue-mobile-app-crashes-on-keyboard-enter-click

I suspect the $router.replace call to be responsible for the crash, if I remove it the app doesn't crash.

[rstoenescu]

@maiolica

Can you do 2 tests please?

1. Wrap the $router.replace call in a this.$nextTick(() => { this.$router.replace(....) })
2. Wrap the $router.replace call in a setTimeout(() => { this.$router.replace(....) }, 300)

Let me know how it goes. iOS strikes again :)

[maiolica]

Hi Razvan!
Just tested them both, the app still crash, I've even tried setTimeout with 3000ms just to be sure.

[nothingismagick]

My money is on something snarky in the @submit.prevent hook in <form>
Try also putting @keydown.enter.prevent into each of your inputs.

And finally, do you absolutely need the <form> element?

[rstoenescu]

@maiolica Can you copy paste me the terminal output of "quasar info" please? I just want to make sure you are on latest and greatest, otherwise there was an issue reported in Vue which got fixed.

[maiolica]

@nothingismagick: I've added the form element (with @submit.prevent to prevent the page to be reloaded) as the client requested the ability to submit forms by pressing the "Go" button on the keyboard, are there other ways to achieve this?

@rstoenescu: here's the full output of `quasar info`:

Operating System                Darwin(18.2.0) - darwin/x64
NodeJs                          10.15.0

Global packages          
  NPM                           6.7.0
  yarn                          1.15.2
  quasar-cli                    0.17.24
  vue-cli                       3.5.1
  cordova                       8.1.2 (cordova-lib@8.1.1)

Important local packages 
  quasar-cli                    0.17.24 (Quasar Framework CLI)
  quasar-framework              0.17.20 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
  quasar-extras                 2.0.9   (Quasar Framework fonts, icons and animations)
  vue                           2.5.17  (Reactive, component-oriented view layer for modern web interfaces.)
  vue-router                    3.0.1   (Official router for Vue.js 2)
  vuex                          3.0.1   (state management for Vue.js)
  electron                      Not installed
  electron-packager             Not installed
  electron-builder              Not installed
  @babel/core                   7.0.0-beta.54   (Babel compiler core.)
  webpack                       4.25.1  (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            3.1.14  (Serves a webpack app. Updates the browser on changes.)
  workbox-webpack-plugin        3.6.3   (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
  register-service-worker       1.5.2   (Script for registering service worker, with hooks)

[maiolica]

I've updated both cordova (9.0.0) and cordova-ios (5.0.0), the crash persists.

[maiolica]

I've resolved this issue by installing the latest Xcode, 10.2.

[rstoenescu]

So it was an Xcode bug after all. Ok, closing this ticket unless you have any objections.

[maiolica]

No objections, thanks for the support!