iron-overlay-behavior icon indicating copy to clipboard operation
iron-overlay-behavior copied to clipboard
verified publisher icon PolymerElements

Loses focus on emulated device mode and mobile devices

Open motss opened this issue 9 years ago • 4 comments

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

motss avatar Jun 21 '16 16:06 motss

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 avatar Jun 22 '16 21:06 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 ontap
  • 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 onclick

This might be related to this issue as well https://github.com/Polymer/polymer/issues/3483

@azakus FYI

valdrinkoshi avatar Jun 22 '16 23:06 valdrinkoshi

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

valdrinkoshi avatar Jun 23 '16 16:06 valdrinkoshi

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

ruud avatar May 29 '17 14:05 ruud