Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent jquery-mobile popup repositions for Huawei phones after text is entered to an input element

in our project we are utilizing the jquery-mobile popup dialog

Once the dialog is shown, the first time I attempt to fill in the text on my phone (Huawei P9 lite, Android 6.0.0, Chrome 55.0.2883.91), the popup closes and reopens.

I am able to replicate this issue even on the demo Form popup.

On a sightly larger device (5.7 inches vs 5 inches) with a larger screen and almost the same android (6.0.1, the same browser) this does not happen.

It seems to be caused by popup automatically repositioning after the keyboard appears. Did anyone encounter a similar problem? How did u solve it?

<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Please sign in</h3>
            <label for="un" class="ui-hidden-accessible">Username:</label>
            <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
        </div>
    </form>
</div>
like image 286
Igor L. Avatar asked Feb 15 '17 13:02

Igor L.


1 Answers

The answer is based on Omar's comment. Once I comment the following lines of code the behavior does not appear (there is a possible loss of a nice repositioning feature).

_handleWindowResize: function(/* theEvent */) {
    if ( this._isOpen && this._ignoreResizeTo === 0 ) {
        if ( ( this._expectResizeEvent() || this._orientationchangeInProgress ) &&
            !this._ui.container.hasClass( "ui-popup-hidden" ) ) {
            // effectively rapid-close the popup while leaving the screen intact
            // this._ui.container
            //  .addClass( "ui-popup-hidden ui-popup-truncate" )
            //  .removeAttr( "style" );
        }
    }
},
like image 64
Igor L. Avatar answered Nov 15 '22 17:11

Igor L.