角2材質：最初のナビゲーションアイテムに焦点を当ててください

Question

Angular 2 Materialを使用していますが、ナビゲーションに問題があります。 sidenavを開くたびに自動的にフォーカスが最初のmd-buttonアイテムに設定され、画面上のどこかをクリックするまで消えません。

これは例である：https://plnkr.co/edit/pNv9Bx4o1qQSF2bpOqyM?p=preview

Iはsidenav.open()イベントに別の要素にfocus()を設定しようとしたが、点滅効果が秒間表示されます。

この最初のフォーカスを最初のメニュー項目に無効にするオプションやプロパティはありますか？

Answer 1

md-sidenavの場合はmode='side'の場合はバグだと思われます。 GitHubにはいくつかの問題があります（OP、あなたも自分で投稿したことを見ました;良い仕事）。それを再生すると、アンカータグのmd-buttonディレクティブに実際に関連しているようです。 タグを<button>に置き換えると、md-buttonがまだ存在する限り修正されませんでした。さらなる証拠として、最初の<a>タグからmd-buttonを削除すると、の2番目のリスト項目（最初の要素はmd-button）がこのように強調表示されます。

とにかく、この問題を解決する最善の方法は、Angularチームの意見が聞き取れるまで回避策を講じることです。私は、リスト上のmd-button最初に目に見えないリスト項目を追加することによって、行動を修正することができました。私たちはダミー素子でdisplay: noneを設定することはできません

<md-sidenav #sidenav class="example-sidenav"> 

    <a md-button style="height: 0; position: absolute;"> <!-- 'absorbs' the behavior --> 
    </a> 

    <md-list> 

     <md-list-item> 
     <a (click)="sidenav.close()" md-button> 
      <md-icon>directions_car</md-icon> 
     </a> 
     </md-list-item> 
     ...... 
    </md-list> 
    </md-sidenav> 

注意。この指令は無視します。ちょうどheight: 0または類似のものを使用してください。私はまたposition: absoluteを設定したので、他の要素の位置を混乱させませんでした。

編集：ここに問題があります。ある協力者によれば、これは意図したとおりに動作していますか？目が離せない - それが本当であれば、これはユーザーにとって混乱しているため、機能要求として提出する必要があります。 https://github.com/angular/material2/issues/3215