iPhone input binding cursor

[davidhendrickmb]

On an input on a modal, the cursor sits below the input when it is interacted with, which looks pretty bad. You can see in the below the First Name is the one where text is being entered, but the cursor is on password.

[girellini]

@davidhendrickmb Here is a fix that is working for me. Let me know your results.

(function iOS_CaretBug() {
    var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
    // ios 11 bug caret position
    if (iOS && iOS11) {
        $(document.body).on('show.bs.modal', function (e) {
            if ($(e.target).hasClass('inputModal')) {
                // Get scroll position before moving top
                scrollTopPosition = $(document).scrollTop();
                // Add CSS to body "position: fixed"
                $("body").addClass("iosBugFixCaret");
            }
        });
        $(document.body).on('hide.bs.modal', function (e) {
            if ($(e.target).hasClass('inputModal')) {
                // Remove CSS to body "position: fixed"
                $("body").removeClass("iosBugFixCaret");
                //Go back to initial position in document
                $(document).scrollTop(scrollTopPosition);
            }
        });
    }
})();

[davidhendrickmb]

Hi @girellini, Unfortunately that didn't work for me. You can see it here: https://beta-meetingsbooker.azurewebsites.net/ If you click the login link and click the username, you'll see what I mean. Do I need some CSS to go along with this for "iosBugFixCaret"?

Thanks, David

[davidhendrickmb]

@girellini Sorry to use this issue thread, but just wanted to let you know the demo pages are reporting errors and the maps aren't loading as you now have to use an API key to use Google Maps https://demos.creative-tim.com/material-kit-pro/examples/contact-us.html

[girellini]

@davidhendrickmb

Ah yes, so sorry. Add this into your CSS.

body.iosBugFixCaret.modal-open {
    position: fixed;
}

[girellini]

@davidhendrickmb

Waiting for some good news, lol.

[girellini]

The method behind it sets the body to fixed when the modal shows. That gets rid of the floating cursor on iOS. When the modal hides it removes the extra body class.

[davidhendrickmb]

@girellini I had to change it to the below to bind my modal, but it works now! if($(e.target).hasClass('inputModal') || $(e.target).hasClass('modal'))

Cheers!

[girellini]

Awesome!

[davidhendrickmb]

Will this be included in a future release?

[groovemen]

Hello there,

Thank you for your interest in working with our products, we fixed the API KEY issue on the demo version and related to the binding cursor on a different input, this will be integrated into the next update.

All the best, Stefan