Loses focus on emulated device mode and mobile devices

[motss]

Description

When restore-focus-on-close is set, the restoreFocusNode loses focus when overlay closes on emulated device mode on Chrome and mobile devices. However, on desktop, restoreFocusNode focuses and can be seen with focus ring when overlay closes.

Expected outcome

restoreFocusNode focuses with visible focus ring.

Actual outcome

restoreFocusNode loses focus when overlay closes.

Live Demo

http://jsbin.com/popukoruye/edit?html,output

Steps to reproduce

Browsers Affected

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

[valdrinkoshi]

Hi @motss, I noticed 2 things (see this simplified example http://jsbin.com/hefoluk/6/edit?html,output):

• when tap event is fired, document.activeElement is not updated to be the element tapped yet (press ontap button and check the log), so you might want to set the tapped element to be focused (event.target.focus())
• with onclick button, focus gets restored, but on the device simulator the outline appears and disappears (even on native elements - very weird); if you hit the TAB key you'll see the focus moves to the right next element.

[valdrinkoshi]

After further tests here http://jsbin.com/hefoluk/8/edit?html,output, I see weird things going on with focus changes:

• with tap event, the button is not focused yet when we open the dialog
  
• with click event, the button is focused before we open the dialog (good), is restored after the dialog gets closed, but then it gets blurred right after; that's because IronOverlayManager listens to tap in order to cancel the overlay. So what happens is that the tap outside the dialog closes it and restores the focus, but then the click still happens outside, causing the final blur
  

This might be related to this issue as well Polymer/polymer#3483

@azakus FYI

[valdrinkoshi]

I've created this issue Polymer/polymer#3732

[ruud]

Created a pull-request to fix this issue: See #246