Bootstrap: IE 11 Modal input focus weird caret

[etiennejcharles]

Hello guys :D

I'm having troubles with my caret 🤕 ~
Left is Chrome, Right is IE11

• Reduced test case

Happens on Edge and IE, would the community have an idea why that would happen? I'de gadly PR myself unto this ;)

The only fix I found is to use a "setTimeout" around IE when using a modal, as we know setTimeouts are weird for animation handling.

I'm just wondering what's the community's take on this.

• Operating system and version : Windows 10
• Browser and version IE 11, Edge,

[XhmikosR]

I wonder if this happens with the latestv4-dev. @Johann-S @MartijnCuppens can you check?

[Johann-S]

I can reproduce it here: https://s.codepen.io/Johann-S/debug/PxEgLL on IE 11 😲

[MartijnCuppens]

This is clearly a browser bug which is caused by the transitioning of the modal. I don't think we can do anything about this (unless we postpone the autofocus to when the transition is completed)?

[bkdotcom]

FWIW, there's a pull request that adds out-of-the-box autofocus support to modals (just add the autofocus attribute to the desired input)

25651

The focus is performed when the transition completes

[etiennejcharles]

My temporary fix looks like so.

$('#modal').on('shown.bs.modal', function() {
    // Bug fix for focus
    // https://github.com/twbs/bootstrap/issues/27691
    waitBeforeFocusIfIE(focusOnSearch);
});

function waitBeforeFocusIfIE(callback) {
    // Wait 200 seconds before focusing on the input
    // because IE can't handle animations so well...
    if (isIE()) {
        var TIMING_MILLISECONDS = 160;
        setTimeout(function() {
            callback();
        }, TIMING_MILLISECONDS);
        return;
    }
    callback();
}

function isIE() {
    return /*@cc_on!@*/ false || !!document.documentMode; // At least IE6
}

@bkdotcom: Does your PR fix that specific use case?

[bkdotcom]

@etiennejcharles sorry... when I originally posted that I thought that internally bootstrap was firing the modal.shown event after the transition ends... (it's fired from within a transitionEnd() method)

it appears that boostrap determines when the transition ends via emulation via a timeout
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/util.js#L92

My guess is a few additional ms should be added to the return value to account for "browser implementation issues"

[etiennejcharles]

So if I understand the best fix for this, would be to do a PR for it, is that correct ?
@Johann-S @MartijnCuppens

And by PR, I do mean a PR via the bootstrap repo, implementing the fix I'm doing.
See comment above here

I'm not a fan of setTimeouts do you have any better ideas ?

[Manuel-Suarez-Abascal]

Hi,

Does this issue has been resolved? I have tried to recreate the bug to work on it, but I couldn't it recreate this bug on IE11...
https://s.codepen.io/manuelsuarezabascal/debug/vMwwQE/NQkzYqeaxWvA
If it is resolved, can we close this issue?

[mdo]

This is indeed not an issue in v4.4.1 in IE11. Confirmed on my PC here.