ColorlibHQ / AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5
https://adminlte.io
MIT License
43.94k stars 18.17k forks source link

Select2 input not working on ios safari #866

Closed sebastianvirlan closed 8 years ago

sebastianvirlan commented 8 years ago

Every select2 input from this page https://almsaeedstudio.com/themes/AdminLTE/pages/forms/advanced.html will not work on any ios device from safari.

gingters commented 8 years ago

This is a side-effect from fastclick.

We worked around this by overriding a method from fastclick in our javascript with code from a PR that has not yet been included in fastclick. Also, fastclick interferes with typeahead on iOS devices, so we disabled a android-specific workaround here.

However, we rely on cordova for platform detection to enable the hack only when running on iOS:

    FastClick.prototype.sendClick = function(targetElement, event) {
        var clickEvent, touch,
            // für patch hinzugefügt:
            mouseUpEvent, mouseDownEvent, isIos = (cordova && cordova.platformId === "ios");

        // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
        if (document.activeElement && document.activeElement !== targetElement /* PATCH: Typeahead */ && !(isIos) /* end patch */ ) {
            document.activeElement.blur();
        }

        touch = event.changedTouches[0];

        // PATCH: Select2
        if (isIos) {
            mouseDownEvent = document.createEvent('MouseEvents');
            mouseDownEvent.initMouseEvent('mousedown', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
            mouseDownEvent.forwardedTouchEvent = true;
            targetElement.dispatchEvent(mouseDownEvent);

            mouseUpEvent = document.createEvent('MouseEvents');
            mouseUpEvent.initMouseEvent('mouseup', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
            mouseUpEvent.forwardedTouchEvent = true;
            targetElement.dispatchEvent(mouseUpEvent);
        }
        // end patch

        // Synthesise a click event, with an extra attribute so it can be tracked
        clickEvent = document.createEvent('MouseEvents');
        clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
        clickEvent.forwardedTouchEvent = true;
        targetElement.dispatchEvent(clickEvent);
    };
lets-colab commented 8 years ago

You can replace fastclick.js with the following https://raw.githubusercontent.com/ftlabs/fastclick/569732a7aa5861d428731b8db022b2d55abe1a5a/lib/fastclick.js