Range Selections in Modal (IE only)

[wrporter]

This is only a bug tested in IE 9 and 10. The bug is not produced in Firefox or Chrome. Also note that this bug in ONLY reproduced in modals. This method works for selecting text when not in a modal window.

I am programmatically selecting text from a div in a modal. The focus event in Bootstrap 2.3.1 on line 907 (shown below) conflicts with the selecting of text.

enforceFocus: function () {
    var that = this
    $(document).on('focusin.modal', function (e) {
        if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
            that.$element.focus()
        }
    })
}

Below is code to duplicate the issue only in IE.

HTML

<button href="#myModal" role="button" class="btn" data-toggle="modal">Show Modal</button>

<div id="myModal" class="modal hide fade" data-backdrop="false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <button class="btn textSelector">Select All</button>
        <div>
            <table class="table table-bordered table-striped table-condensed">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Password</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tuna Child</td>
                        <td>tchild</td>
                        <td>t</td>
                        <td>tuna@tuna.com</td>
                    </tr>
                    <tr>
                        <td>Joshua Hazengoa</td>
                        <td>jhazengoa</td>
                        <td>jj32</td>
                        <td>josh@tunaeater.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </div>
</div>

The JavaScript to simulate selecting the text:

$('.textSelector').click(function(){
    var text = $(this).siblings().find("table").parent()[0];
    var range;
    if(document.body.createTextRange){ //ms
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    }else if(window.getSelection){ //all others
        var selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
});

I have isolated the issue in the bootstrap source on line 907 (as mentioned above) and have added a bandage fix to my code above, at the top of the click event:

$(document).off("focusin.modal");

[cvrebert]

Sorry, Bootstrap v2.x.x is no longer supported. You can try asking for help on the mailing list though; see the README for a link.

[wrporter]

It is confirmed that this is still an issue in the current release of Bootstrap. This issue should be reopened. See http://jsbin.com/IvoPuwO/5/edit

[fat]

Sorry this focus trap is for accessibility reasons. To get around this for your case you could just set the enforce focus method to a noop. Allthough people with screen readers will be pretty confused when trying to use modals in your application