autoComplete not working correctly on mobile browsers (bug?)

ComGreed

It seems like the autoComplete plugin of jquery-ui doesn't work with with the Google Chrome and Firefox mobile browser. Everything works fine on their desktop versions. I'm sure it has something to do with how modals are displayed in mobile browsers but I can't figure out where the issue is.

The only thing I was able to rule out is that it's simply an issue with the z-index because if I trigger the autoComplete and then switch to another field that doesn't have autoComplete enabled it should still close the list even if it is in the background. But when I close the box I can see that the complete list is still visible. I assume that editor.autoComplete.js doesn't correctly hand over the input element to the jquery-ui autoComplete.

You can look at the live page in GC desktop with mobile view enabled in the dev tools as well:
http://live.datatables.net/hapitafa/4/

And a little side-question: Do Editor plugins have a npm package just like DataTables have? I'd love to let npm take care of potential updates and bundle everything using webpack.

allan

Do Editor plugins have a npm package just like DataTables have?

Currently no - sorry. That is something we will likely do in future.

You can look at the live page in GC desktop with mobile view enabled in the dev tools as well

How do you enable the mobile view? I can enable a Responsive mode, but it appears to work just fine like that (Chrome 80).

Allan

ComGreed

1. click on Toggle device toolbar
2. choose the device you want to use
3. refresh the page

After that you can click on new and type something like a into the first input. Nothing visible should happen but when you close the modal there will be the list that was missing before.

ComGreed

If you select Responsive it shouldn't work either if you reload the page after switching into this mode.

allan

Got it! Thanks - it was the reload that I was missing - I'd forgotten that Editor does some detection of if a mobile browser is being used or not on startup.

What the lightbox controller is doing is:

        if ( window.orientation !== undefined ) {
            $('body').addClass( 'DTED_Lightbox_Mobile' );
        }

then in the CSS we have:

body.DTED_Lightbox_Mobile div.DTED_Lightbox_Shown {
    display: none;
}

The idea was that anything not in the lightbox (Editor's modal) should not be shown since position:fixed is so dodgy on mobiles.

jQuery UI AutoComplete has an appendTo option though which we can use:

  editor
    .field('Name')
    .input()
    .autocomplete( "option", "appendTo", editor.field('Name').input().parent() );

http://live.datatables.net/wugeputo/1/edit

That attaches the AutoComplete dropdown to the parent of the input element for the field.

I'll get that into the plug-in as it should probably do that by default.

Thanks,
Allan

ComGreed

Thanks a lot for your help.