autocomplete: tabbing away from first cascading autocomplete does not update the selection
I've got a couple of md-autocomplete controls being used as cascading dropdowns.
Actual Behavior:
-
What is the issue? *Tabbing away from the first autocomplete does not update the selection for the second autocomplete. -
What is the expected behavior?Tabbing away from the first autocomplete (Country) narrows the options available on the second one (City).
CodePen (or steps to reproduce the issue): *
-
CodePen Demo which shows your issue:https://codepen.io/anon/pen/vWNXMM -
Details:
- Click on the 'Country' autocomplete
- Down arrow to select 'Canada'
- Hit 'Tab'
- Expected: 'City' autocomplete filtered to only show 'Vancouver' and 'Toronto'
- Actual: 'City' autocomplete shows all cities
AngularJS Versions: *
-
AngularJS Version:1.5.5 -
AngularJS Material Version:
Additional Information: 1.1.5
-
Browser Type: *Chrome -
Browser Version: *61.0.3163.100 -
OS: *Windows 10 -
Stack Traces:
Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.
Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.
In this case, tab is causing a focused, but not selected, element in the dropdown to become selected. It's not clear to me that this is the correct behavior. To select the item, I believe that the enter key should be required.
We recently made changes to tabbing away from md-menu and that does not cause the focused item to be selected. This needs more investigation, but it is clear that something needs to be changed and the current behavior is not appropriate.
I would expect that you would need to press enter to select the item and then tab to move to the next autocomplete. This does give the proper behavior (only the Canadian cities are displayed).