Button on-click events not working when inside form

[halloweenman]

Description

I have a form within a paper-dialog that contains a paper-dialog-scrollable element. When you click on the paper-button on-click event function never fires when using IOS mobile device such as iPad or iPhone, or Nexus 7 Andriod device. No issues on latest version of desktop Chrome or Safari.

This issue is something to do with scroll-action="lock" as when this is not set then it works fine on all devices

Expected outcome

You would expect the on-click event functions to execute.

Actual outcome

Unresponsive buttons.

Steps to reproduce

Here is the code:

import { PolymerElement, html } from '@polymer/polymer';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/iron-form/iron-form.js';
import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
import '@polymer/paper-button/paper-button.js';

class myelement extends PolymerElement {
    static get template() {
        return html`

<paper-dialog modal scroll-action="lock" id="mydialog">
    <iron-form>
        <form action="/foo" method="post">
            <paper-dialog-scrollable id="mydialogscrollable">
                MY CONTENT
            </paper-dialog-scrollable>
            <paper-button on-click="_dosomething">Save</paper-button>
        </form>
    </iron-form>
</paper-dialog>
`;
    }
    static get is() { return 'my-element'; }

    ready() {
        super.ready();
        this.$.mydialogscrollable.dialogElement = this.$.mydialog;
    }

    _dosomething() {
        alert("SOMETHING");
    }
}

window.customElements.define(myelement.is, myelement);

Browsers Affected

IOS Mobile devices (iPhone & iPad). Andriod mobile (Nexus 7).

[derhuebiii]

I have a similar problem. Did you try to remove scroll-action="lock"

For me it works then. Of course this is not the solution but might bring is closer :)

[halloweenman]

Thanks. Yes, I did discover and report this in the original description of this issue. However, removing scroll-action="lock" causes a second issue with unpredictable and erroneous dialog scrolling/placement behaviour when viewing using an IOS device (I tested using iPhone) in landscape orientation.

See https://github.com/PolymerElements/paper-dialog/issues/177

[derhuebiii]

Sorry, must have been blind when reading your post :)

Following the code of scroll-action="lock" I get to this function: https://github.com/PolymerElements/iron-overlay-behavior/blob/39739ebb3992a5e716b482c5902aa40dd31fb806/iron-scroll-manager.js#L202

It is called to prevent the scrolling. It should only be called for scrolling and also the elements within paper-dialog should not be affected. But as there is a event.preventDefault(); maybe this could be related blocking the on-click event? Or with targetTouches, as it only fails on mobile devices?

It also fails for me in Chrome Developer Tools emulating mobile devices but works if you select the elements via TAB and press ENTER OR using touch on my desktop screen fails but clicking works.