Cancel event of "iron-overlay-behavior" is triggered before the On-Click of the element on emulated device mode and mobile devices

[chanshachans]

Description

An overlay is opened by the on-click method of a button using toggle event of "iron-overlay-behavior" and when clicking on the same button to close the overlay to call the toggle event. The Cancel event of "iron-overlay-behavior" is triggered before the on-click method on emulated device mode and mobile devices on chrome. Same case is working fine on desktop.
code:
on-click="click"
click() {
this.$.element.toggle();
}

Expected outcome

Overlay needs to close on clicking the same button used for open on emulated device mode and mobile devices on chrome. i.e On-click event needs to be triggered 1st and then cancel event needs to be triggered

Actual outcome

Overlay opens on on-click events, but doesnt closes on calling the toggle event in on-click function on emulated device mode and mobile devices. i.e Cancel event is triggered before the On-click event.

Live Demo

Steps to reproduce

Example

1. Put a button which opens the overlay element on-click of it in the page.
2. In the on-click(), call the toggle event for the overlay i.e. this.$.element.toggle()
3. Open the page in a dev-tools with responsive mode(tablets,ipad) on chrome.
4. Click on the button, opens the overlay using the toggle().
5. Again, click on the same button to close the overlay with toggle().But,It doesn't closes it.

Browsers Affected

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