DIalog: selecting text programmatically in IE is impossible in modals

[Simen Bekkhus]

Bad title...

We have a copy to clipboard dialog, that marks the text in the dialog, so the user just has to press ctrl c, as well as a button underneath to allow you to select all the text on demand.

If the dialog is a modal, this only works in Chrome, not in IE8, 9 or 11. If it's not a modal, it works in all.

JSFiddle: ​http://jsfiddle.net/SimenB/v7jm7tro/

If you remove modal: true, and run it anew, you can see that the selecting work.

[Simen Bekkhus]

After digging in the source code, I found that _allowInteraction returns false in IE, as $( event.target ).closest( ".ui-dialog" ).length is 0.

EDIT: This is because the target is the body of the document.

[tj.vantoll]

Same underlying cause as #9125.

[Simen Bekkhus]

Do you have any workaround or hack we could use? We have to support IE, and we have to be able to select the text from the user (client demand). I suppose we could try to use the overlay manually, but then we lose a lot of the magic surrounding the modal that's really useful.

[tj.vantoll]

Replying to SimenB:

Do you have any workaround or hack we could use? We have to support IE, and we have to be able to select the text from the user (client demand). I suppose we could try to use the overlay manually, but then we lose a lot of the magic surrounding the modal that's really useful.

Unfortunately I don't know of a good workaround without foregoing the modal functionality. When I looked at this problem before I got this far (​http://bugs.jqueryui.com/ticket/9313#comment:5). I would recommend playing with an extension that overrides _allowInteraction to see if you can come up with something that works.

[Simen Bekkhus]

I did just that, and got it working (tested in IE8-11).

I added the middle if in _allowInteraction

_allowInteraction: function( event ) {
    if ( $(event.target).closest( ".ui-dialog" ).length ) {
        return true;
    }

    if ( event.target === this.document[ 0 ].body && $(event.target).hasClass( "ui-dialog-allow-focus" ) ) {
        $(event.target).removeClass( "ui-dialog-allow-focus" );

        return true;
    }

    // TODO: Remove hack when datepicker implements
    // the .ui-front logic (#8989)
    return !!$(event.target).closest( ".ui-datepicker" ).length;
}

and also added the class in my selection-method

makeSelection: function (element) {
    var range, selection,
        body = document.body;

    $(body).addClass('ui-dialog-allow-focus');

    if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }

    // This is only necesarry if not using  a jQuery UI Dialog that is modal (which we never do), but putting
    // it here to be safe
    setTimeout(function () {
        $(body).removeClass('ui-dialog-allow-focus');
    }, 5);
}

Very much an ugly hack, but at least it works. Hopefully you guys can come up with a much better solution to the problem.