角度材質ダイアログモバイルキーボードの問題

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>

コードのため申し訳ありませんが、それは私がそれなしで投稿できないだろう。完全な実例がすでにペンに入っているので、これは悪くないし、気分も悪くない。また、私は悪いと感じることもない。

モーダルを出してテキスト入力の1つにフォーカスし、 'X'またはフィールドを記入して 'ログイン'をタップすると、モーダルが解除されると、キーボードは画面上に残ります。キーボードで「完了」をタップすると、それは解消されますが、画面上の他の場所をタップするといつでも戻ってきます。 「X」でダイアログを閉じたり、「ログイン」をタップする前に、「完了」をタップしたことを確認するだけです。

アンギュラマテリアルがダイアログを非表示にしているという問題があると推測していますが、オンスクリーンキーボードはテキスト入力が有効であると考えています。

誰かが回避策を知っていますか、またはこのペンで$ mdDialogが正しく使用されていないのですか？

Answer 1

私が見つけた解決策は、ダイアログが閉じられたときに入力がぼやけていることを確認することです。私は

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

と私のdialog.login()の方法を加えてこれを行いました。