Opened 4 years ago

Last modified 4 years ago

#10701 open bug

DIalog: selecting text programmatically in IE is impossible in modals

Reported by: Simen Bekkhus Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.11.2
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (5)

comment:1 Changed 4 years ago by 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.

Last edited 4 years ago by Simen Bekkhus (previous) (diff)

comment:2 Changed 4 years ago by tj.vantoll

Status: newopen
Summary: When having a jQuery UI DIalog as a modal, selecting text programatically in IE is impossibleDIalog: selecting text programmatically in IE is impossible in modals

Same underlying cause as #9125.

comment:3 Changed 4 years ago by 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.

comment:4 in reply to:  3 Changed 4 years ago by 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.

comment:5 Changed 4 years ago by 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 necessary 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.

Last edited 4 years ago by Simen Bekkhus (previous) (diff)
Note: See TracTickets for help on using tickets.