13

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>
Igor L.
  • 3,159
  • 7
  • 40
  • 61
  • use a page with data-role="dialog", as you have anyway data-position-to="window" in your project – deblocker Feb 15 '17 at 14:35
  • Thanks a lot, since we have a decent amount of these, I will attempt to find a quick workaround instead of reworking all the popups – Igor L. Feb 24 '17 at 09:35
  • @deblocker dialogs will be removed in next version. – Omar Feb 24 '17 at 10:54
  • @Omar: THX for correcting my mistake, my intention was to suggest to use a page with data-dialog="true", this is working already in 1.4.5 and AFAIK will be supported also in 1.5 - you confirm? – deblocker Feb 24 '17 at 15:16
  • 2
    @deblocker no worries :) I'm not sure if that would fix OP's problem. It's all about some code attached to resize event. https://github.com/jquery/jquery-mobile/blob/e377564aa121d0439a21bc97f7854ee618c3f72d/js/widgets/popup.js#L367 – Omar Feb 24 '17 at 15:42
  • @Omar thanks for this, for now its the most I received for my 50 points :) Hard and way too specific question I guess. – Igor L. Feb 28 '17 at 09:30

1 Answers1

4

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" );
        }
    }
},
Igor L.
  • 3,159
  • 7
  • 40
  • 61
  • 2
    you can add reposition function in place of the commented code. – Omar Mar 02 '17 at 08:40
  • 2
    @Omar: i guess this has been fixed for 1.5, at least from the changelog here [jQuery Mobile 1.5.0-alpha1 Changelog](http://jquerymobile.com/changelog/1.5.0-alpha1/) – deblocker Mar 03 '17 at 08:43
  • Thanks for sharing @deblocker. Unfortunately, It is not released yet. – Omar Mar 03 '17 at 09:02