title: How to prevent Angular/material mat-menu from closing on key-navigation (tab)?
body: <p>I have read <a href="https://stackoverflow.com/questions/46967970/how-to-prevent-angular-material-mat-menu-from-closing">How to prevent angular material mat-menu from closing?</a> , which explains how to prevent Angular material mat-menu from closing on click.</p>
  
  <p>However: <strong>I cannot seem to find a way to prevent a mat-menu from closing when I press tabulator to change focus</strong>.</p>
  
  <p>Take this StackBlitz as an example: <a href="https://stackblitz.com/edit/angular-ij6jbx" rel="noreferrer">https://stackblitz.com/edit/angular-ij6jbx</a>:
  it properly prevents the <code>mat-menu</code> from closing <strong>when</strong> the input-fields receive the focus <strong>via mouse click</strong>. On the other hand: if I press "tabulator" to change focus and the <code>username</code>-input-field receives the focus, the menu closes.</p>
  
  <p>I would like to know how to prevent this behavior - if it's possible. I tried attaching <code>$event.stopPropagation();</code> to <code>(input)</code>, but it did not seem to do anything.</p>
  
  <p>Apparently some thought has been given to this by the Angular developers according to <a href="https://github.com/angular/material2/issues/2612" rel="noreferrer">https://github.com/angular/material2/issues/2612</a>. Sadly there does not seem to be a proper solution at the end of the issue / feature-request nor a hint about the status.</p>
  
  <p><em>P.s.:</em> I know, that the current code is not beautiful nor really smart. I was going to refactor that into its own directive once it worked for both click and key-press.</p>