Touch and drop down list

[Zarrdex]

Hi

I am having an issue, whereby I have a drop down list, which before I open up the keyboard, I am able to touch swipe/scroll through the drop down list. I then open up and close the keyboard. This then stops the touch swipe/scroll on the drop down list.

When I do not invoke the keyboard and use the windows virtual keyboard, this does not the touch swipe/scroll.

Mouse events are working as expected, this only effects touch screens only on chrome not on any other browser.

I am using windows 10 (latest patches) Chrome (latest version) and a Dell touch screen laptop.

I have narrowed this down to the mottie keyboard, causing this issue. As you can create a simple page with a drop down list of over 20 items (this is to ensure that there is scrolling needed) a input text box and assign the keyboard to the input. That's it.

[Mottie]

HI @Zarrdex!

Do the dropdowns have any event bindings? I am unclear as to how this plugin would interfere with plain dropdowns, so would you please provide an example (feel free to modify this demo) to make it easier for me to troubleshoot the problem?

[Zarrdex]

I have amended the demo, for you to look at

[Mottie]

Share a link please.

[Zarrdex]

https://jsfiddle.net/egb3a1sk/1629/

[Mottie]

I am not able to duplicate the issue in that demo... well I updated it https://jsfiddle.net/Mottie/egb3a1sk/1630/ - the lockInput is set to true to prevent the native Windows virtual keyboard from opening. I am able to use the dropdown using touch and swipe both before and after using the keyboard plugin.

[Zarrdex]

Are you using windows 10 with the latest updates, Chrome (latest version).

Could it be my laptop (Dell Inspiron 17 5000 series) as I am still having the issue

[Mottie]

Hmm, okay I see what you're saying now. I can't get the select to scroll using touch, even before interacting with the keyboard.

I'll have to dig into the code a bit to figure out the problem. Thanks for letting me know!

[Zarrdex]

Hi Mottie;

Just wondering where we are with this, issue

[Mottie]

Sorry, no I haven't had a chance... I'm not even sure where to start looking.

[Zarrdex]

Hi Mottie;

Just wondering if it could be a chrome issue, as the drop down list for touch is not always responsive for scrolling. but after using the keyboard it is more pronounced.

[Mottie]

I'll try to spend some time on it this weekend. It might be a webkit thing - Chrome, Opera & Safari (which I can't test). I'll check it out on Firefox too.

[Zarrdex]

Hi Mottie;

on a completely different note, I was having an issue whereby the windows virtual keyboard was sometimes showing when I touched on the background of the keyboard.

one of issue seems to occur when we focus in on the preview (around line 887)

        base.$keyboard.bind('mousedown click touchstart '.split(' ').join(base.namespace + ' '), function (e) {
            e.stopPropagation();
            if (!base.isCurrent()) {
                base.reveal();
                $(document).trigger('checkkeyboard' + base.namespace);
            }
            if (!o.noFocus) {
              base.$preview.focus();
           }
        });

I added e.preventDefault() example below,

            if (!o.noFocus) {
                base.$preview.focus();
                **e.preventDefault();**
            }

I have only tested this in chrome. but this seems to have stopped the virtual keyboard showing when touching the background of the keyboard

please note that i do have another function in my software that enforces the not showing the virtual keyboard depending on certain criteria
Example of code

    $(document).on("touchstart, focusin", "input:not(.ui-keyboard-preview, .hasDatepicker)", function (event) {

    if (supportsMobile) {
        $(event.target).blur();
        event.preventDefault();
        return false;
    }
    else {
        if (touchMode) {
            $(event.target).blur();
            event.preventDefault();
            return false;
        }

    }
});

[Mottie]

Sorry I didn't get to this issue in the last release; but I did include the e.preventDefaults additions you mentioned! Thanks!

[Mottie]

Ugh, ok I'm going to have to revert the adding of those preventDefault functions because when they are in place, it prevents repositioning the caret on click.