md-select arrow keys (Up/Down) do not work when used in md-dialog

[red010b37]

Using the arrows keys on an open select inside a md-dialog does not work at all - the up down arrows do not work even after you manually click on an element to force focus on the select.

Using the list in a non modal section the select functions as expected

[mateusleon]

This appears to be with the trapFocus() function used on md-dialog.

https://github.com/angular/material/blob/master/src/components/dialog/dialog.js#L441-L448

    function trapFocus(ev) {
      var dialog = document.querySelector('md-dialog');

      if (dialog && !dialog.contains(ev.target)) {
        ev.stopImmediatePropagation();
        dialog.focus();
      }
    }

I think it's kind of tricky to deal with, because of its numerous approachs, coming from defining exceptions on the trapFocus handler...

But, what do you think to place an element, like a sandbox of dinamically created instances, like mdDialog, or the mdSelect options, where all elements placed there belongs to the current manipulation:

    [...]
    <md-sandbox>
        <md-sandbox-instance [attrs-for-identification-or-configuration]>
            <!-- Here goes a mdDialog, for example -->
        </md-sandbox-instance>

        <md-sandbox-instance [attrs-for-identification-or-configuration]>
            <!-- Here goes a mdSelect options, for example -->
        </md-sandbox-instance>
    </md-sandbox>
</body>

From the sandbox, events are contextualized, avoiding that trapFocus to be a shoot on the toe...

[redyyu]

+1

[joshribakoff]

+1

I imagine lots of people will get distracted by the eye candy & invest lots of time in porting from ui.bootstrap or some other framework, only to find out 8hrs in that they destroyed usability, etc.

[gitawego]

I have the same problem because of trapFocus in chrome
I can't focus on any input elements in my dropdown menu (menu is appended to body.) if a dialog is open.