Focus should be restored back to the paper-input when the dropdown is closed

miztroh-zz commented 8 years ago

While testing keyboard navigation, it's been great to tab from one element to a paper-dropdown-menu and back. However, if I press enter, then arrow to one of the menu options, then press enter again, focus is not restored to the paper-input inside the paper-menu-button. That means I can't tab to the next field after selecting a value from the paper-dropdown-menu. So, this breaks keyboard accessibility.

Currently, I've fixed this by adding the following event listener to my paper-dropdown-menu:

menu.addEventListener(
    'paper-dropdown-close',
    function () {
        Polymer.dom(this.$.menuButton).querySelector('paper-input').$.input.focus();
    }
);

miztroh-zz commented 8 years ago

Looks like this could be related to https://github.com/PolymerElements/paper-menu-button/issues/32.

SandeepSuddala commented 8 years ago

can you please tell me where exactly i should put this listener...thank you

cdata commented 8 years ago

Yup, I'm going to close this as a dupe / fixed-by for https://github.com/PolymerElements/paper-menu-button/issues/32

PolymerElements / paper-dropdown-menu

Focus should be restored back to the paper-input when the dropdown is closed #61