Loses focus on emulated device mode and mobile devices

PolymerElements / iron-overlay-behavior

Makes an element an overlay with an optional backdrop

41 stars 71 forks source link

Loses focus on emulated device mode and mobile devices #195

Open motss opened 8 years ago

motss commented 8 years ago

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

[x] Chrome
[ ] Firefox
[ ] Safari 9
[ ] Safari 8
[ ] Safari 7
[ ] Edge
[ ] IE 11
[ ] IE 10

valdrinkoshi commented 8 years ago

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 commented 8 years ago

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 https://github.com/Polymer/polymer/issues/3483

@azakus FYI

valdrinkoshi commented 8 years ago

I've created this issue https://github.com/Polymer/polymer/issues/3732

ruud commented 7 years ago

Created a pull-request to fix this issue: See https://github.com/PolymerElements/iron-overlay-behavior/pull/246