App drawer causes auto focus on the first focuseable element from its content

[alexui]

Description

App-drawer causes auto focus on the first focuseable element from its content

<app-drawer id="drawer" align="right">
<app-toolbar>
<paper-icon-button id="close-drawer-button" icon="someIcon"></paper-icon-button>
</app-toolbar>
<paper-menu id="drawer-menu" tabindex="-1" selected="[[tabSelected]]">
<template is="dom-repeat" items="{{menuItems}}">
<paper-item id="{{item.name}}" name$="{{item.name}}">{{item.value}}</paper-item>
</template>
</paper-menu>
</app-drawer>

The problem is that the <paper-icon-button id="close-drawer-button"> is focused when I open the drawer. If I disable the button the next focuseable element is focused.
How to disable autofocus?

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[KevinAsher]

Try setting the attribute no-focus-trap="true" on app-drawer.
Docs: https://www.webcomponents.org/element/PolymerElements/app-layout/app-drawer#property-noFocusTrap

[alexui]

It works. Thank you very much.

[dimon-durak]

@KevinAsher disabling focus by attribute no-focus-trap work well

But, how manually set focused element from js?

For example, in PSK drawer always focused first element. I try manually set focus for selected anchor in _pageChanged, but still focused first element.

_pageChanged(page) {
  let link = this.$.drawer.querySelector(`a.iron-selected`);
  if (link) link.focus();
  
  // other code here

[keanulee]

You can try using the app-drawer-transitioned event - this is fired in the same function that sets the keyboard focus trap (https://github.com/PolymerElements/app-layout/blob/master/app-drawer/app-drawer.html#L574).