Angular Material Dialog 移动键盘问题

Question

我看到的问题发生在移动设备上，特别是我使用的是带有 iOS 10.0 的 iPhone 6s Plus。

http://codepen.io/AstroDroid/pen/beqjoL

class AppController {
  status = '';
  customFullscreen;
  constructor(private $scope, private $mdDialog, private $mdMedia, private $mdToast) {
    this.customFullscreen = this.$mdMedia('xs') || this.$mdMedia('sm');
  }

  showDialog(event) {
    var useFullScreen = (this.$mdMedia('sm') || this.$mdMedia('xs')) && this.customFullscreen;

    this.$mdDialog.show({
      controller: LoginDialogController,
      controllerAs: 'dialog',
      templateUrl: 'login-dialog.template.html',
      parent: angular.element(document.body),
      targetEvent: event,
      clickOutsideToClose: true,
      fullscreen: useFullScreen
    })
    .then(credentials => this.showToast(`Thanks for logging in, ${credentials.username}.`),
      () => this.showToast('You canceled the login.'));

    this.$scope.$watch(() => this.$mdMedia('xs') || this.$mdMedia('sm'),
      wantsFullScreen => this.customFullscreen = wantsFullScreen === true);
  }

  showToast(content: string) {
    this.$mdToast.show(
      this.$mdToast.simple()
        .content(content)
        .position('top right')
        .hideDelay(3000)
    );
  }
}

class LoginDialogController {
  username: string;
  password: string;

  constructor(private $mdDialog) { }

  hide() {
    this.$mdDialog.hide();
  }

  close() {
    this.$mdDialog.cancel();
  }

  login() {
    this.$mdDialog.hide({username: this.username, password: this.password});
  }
}

function config($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('blue')
    .accentPalette('orange');
  $mdThemingProvider.theme('input', 'default')
    .primaryPalette('grey')
}

angular
  .module('app', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppController', AppController)
  .config(config);

.dialogdemoBasicUsage #popupContainer {
  position: relative;
}

#login-dialog {
  max-width: 90%;
  width: 500px;
}

<div ng-app="app" ng-controller="AppController as login" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak>
  <div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
    <md-button class="md-primary md-raised" ng-click="login.showDialog($event)">
      Login
    </md-button>
  </div>
  <div hide-gt-sm layout="row" layout-align="center center" flex>
    <md-checkbox ng-model="login.customFullscreen" aria-label="Fullscreen Custom Dialog">Force Custom Dialog Fullscreen</md-checkbox>
  </div>

  <div ng-if="login.status" id="status">
    <b layout="row" layout-align="center center" class="md-padding">
      {{login.status}}
    </b>
  </div>

  <script type="text/ng-template" id="login-dialog.template.html">
    <md-dialog id="login-dialog" aria-label="Login" ng-cloak>
      <form name="loginForm" ng-submit="dialog.login()">
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2>Log In</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="dialog.close()">
              <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
          </div>
        </md-toolbar>

        <md-dialog-content>
          <div class="md-dialog-content">
            <md-input-container class="md-block">
              <label>Username</label>
              <input name="username" ng-model="dialog.username" md-autofocus required />
            </md-input-container>
            <md-input-container class="md-block">
              <label>Password</label>
              <input type="password" name="password" ng-model="dialog.password" required />
            </md-input-container>
          </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
          <a href="" class="md-primary">Forgot Password?</a>
          <span flex></span>
          <md-button type="submit" ng-disabled="loginForm.$invalid" class="md-raised md-primary">Login</md-button>
        </md-dialog-actions>
      </form>
    </md-dialog>
  </script>
</div>

抱歉代码，没有它我不会发帖。一个完整的、有效的示例已经在笔中，所以这还不错，我也不觉得不好，也不应该。

当我调出模式并聚焦其中一个文本输入并关闭模式时，无论是通过“X”还是通过填写字段并点击“登录”，当模式被关闭时，键盘仍保持在屏幕。当我在键盘上点击“完成”时，它会被关闭，但只要我点击屏幕上的其他任何地方，它就会回来。我可以避免它的唯一方法是确保在使用“X”关闭对话框或点击“登录”之前点击“完成”。

我猜问题在于 Angular Material 如何“隐藏”对话框，屏幕键盘仍然认为文本输入是有效的。

有谁知道解决方法，或者这支笔没有正确使用 $mdDialog？

Answer 1

我发现的一种解决方法是确保在关闭对话框时输入模糊。我通过添加来做到这一点

this.$document[0].activeElement.blur();

到我的dialog.login() 方法。