Using scroll action lock prevents input elements being visible

[halloweenman]

Description

I have a paper-dialog that includes a scrolling area with a form containing input elements. I have to use scroll-action="lock" to prevent the issue described here #177

This issue occurs when you click on a form input element to enter text on a mobile device with a small screen area, such as iPhone 6 in landscape orientation. The problem is that the input text is hidden by the keyboard.

Here is the page you are presented with initially showing a scrolling area of a dialog with a form:

But when you click on the textarea input element (the 'Hello' text) the user's input is hidden by the keyboard:

Here is the code:

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

/**
 * @customElement
 * @polymer
 */
class DialogtestApp extends PolymerElement {
    static get template() {
        return html`
<style>
    :host {
        display: block;
            }
        
   input {
        font-size: 16px;
        }
        
    textarea {
        font-size: 16px;
        height: 500px;
        width: 150px;
        }
        
    paper-dialog {
                overflow: auto;
            }
</style>

<paper-dialog modal scroll-action="lock" id="mydialog">
    <div>
        <form>
            First name:<br />
            <input type="text" name="firstname" value="Mickey" />
            <br />
            Last name:<br />
            <input type="text" name="lastname" value="Mouse" />
            <br /><br />
            <textarea>Hello</textarea>
        </form>
    </div>
    <paper-button dialog-dismiss="">Cancel</paper-button>
</paper-dialog>

<div>
    WELCOME TO MY WEBSITE
</div>
    `;
    }
    ready() {
        super.ready();
        this.$.mydialog.open();
    }
}

window.customElements.define('dialogtest-app', DialogtestApp);

This is also related to the issue at https://github.com/PolymerElements/paper-dialog-scrollable/issues/87 - these issues are making it very difficult if not impossible to have a correctly behaved input form inside in a paper-dialog.

Expected outcome

You would expect the input to be visible but scroll-action="lock" prevents this. You cannot remove scroll-action="lock" as this introduces undesirable behaviour described at #177

Actual outcome

Input text is hidden by keyboard.

Steps to reproduce

Click on the textarea input using iPhone in landscape orientation.

Browsers Affected

• [x ] IOS Mobile Devices
• [x ] Chrome
• [ x] Firefox
• [ x] Safari 9
• [ x] Safari 8
• [ x] Safari 7
• [ x] Edge
• [ x] IE 11
• [ x] IE 10

[derhuebiii]

+1

This really is a showstopper :/