iOS 12+: мобильное приложение Vue - сбой клавиатуры - PullRequest
Новая
       33

iOS 12+: мобильное приложение Vue - сбой клавиатуры

0 голосов
/ 08 февраля 2019

У нас есть кроссплатформенное мобильное приложение, созданное с использованием Quasar Framework, Vue & Cordova.

На странице входа в систему, когда пользователь пытается войти в приложение на устройстве iOS версии 12+, происходит сбой приложения, когда пользователь использует клавиатуру «ввод» для отправки своих учетных данных.

Вот простое представление формы входа в систему: Форма входа

Сбой происходит только при использовании клавиатуры iOS.Когда пользователь использует кнопку «Вход» на странице входа в систему, приложение не падает, и оно выталкивает пользователя на домашний экран.

Мы проверили это на устройстве с iOS версии 11.4, и сбоя не произошло.

Вот пример моей страницы входа и сценария.

import { required, email } from 'vuelidate/lib/validators';
import { filter } from 'quasar';

export default {
  name: 'PageLogin',
  data: function() {
    return {
      form: {
        username: '',
        password: ''
      },
      loggingIn: false
    };
  },
  validations: {
    form: {
      username: { required, email },
      password: { required }
    }
  },
  methods: {
    onSubmit() {
      this.$v.form.$touch();

      // Only submit if there are no errors
      if (!this.$v.form.$error) {
        this.loggingIn = true;

        this.$store
          .dispatch('account/verifyUsername', this.form)
          .then(result => {
            //account/verifyUsername
            return this.$store.dispatch('account/login', this.form.password);
          })
          .then(result => { //account/login
            this.$router.push({ name: 'home' });
          })
          .catch(error => {})
          .finally(() => {
            this.loggingIn = false;
          });
      }
    }
  }
};
<template>
  <q-page>
    <form class="ad-form" @submit.prevent="onSubmit">
      <q-field :error="$v.form.username.$error" error-label="Please enter a valid email address">
        <q-input type="email" v-model="form.username" float-label="Email" :error="$v.form.username.$error" @blur="$v.form.username.$touch">
          <q-autocomplete @search="onSearch" @selected="onItemSelected" :min-characters="0" value-field="email"/>
        </q-input>
      </q-field>
      <q-field :error="$v.form.password.$error" error-label="Please enter a password">
        <q-input type="password" v-model="form.password" float-label="Password" :error="$v.form.password.$error" @blur="$v.form.password.$touch"/>
      </q-field>
      <q-btn class="standalone" type="submit" color="primary" :loading="loggingIn" :disabled="$v.form.$invalid">Login
        <span slot="loading">
          <q-spinner class="on-left"/>Logging In
        </span>
      </q-btn>
      <q-btn class="standalone" type="button" flat color="secondary" :to="{ name: 'forgotPassword' }">Forgot your password?</q-btn>
    </form>
  </q-page>
</template>
...