Opened 10 years ago

Closed 10 years ago

Last modified 8 years ago

#14452 closed defect (fixed)

Dialog: disallows selection of contents when draggable

Reported by: zharmir Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.7.0
Keywords: dijit.Dialog Cc:
Blocked By: Blocking:

Description (last modified by bill)

In all Dojo versions 1.6 and up, the "draggable" attribute has been added to the root DOM node of draggable dialogs. This effectively blocks selection of any content inside the dialog in Safari, Chrome, and Firefox. I've gotten around it in Chrome / Safari by adding this styling:

.claro .dijitDialog {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;

Firefox seems to be ignoring this, however. I suppose I'm not all that familiar with why the draggable attribute was set to true for the root div for 1.6, since it seems like it worked fine before.

Attachments (1)

dialogTest.html (518 bytes) - added by zharmir 10 years ago.

Download all attachments as: .zip

Change History (8)

comment:1 Changed 10 years ago by zharmir

After rather extensive hunting and picking through some complicated functions in core widget code, we've figured this is just Dojo dynamically applying widget properties as attributes to the DOM node. But, the problem remains: I cannot have a draggable dialog with selectable text in non-IE browsers. I'm just going to override this locally with an extended version of Dialog that sets its domNode.draggable to false whenever show() is called.

comment:2 Changed 10 years ago by bill

Ah, good detective work.

But I tried selecting text in Dialog and it's working for me. This is using the "Show Dialog" button in on firefox/mac, safari/mac, and even chrome/win.

The draggable attribute is being copied as part of a change to automatically copy attributes to the DOM without having to specify them in markup, see [25598]. And if you can show me how to reproduce this problem then the fix is presumably to add a custom setter:

_setDraggableAttr: function(/*Boolean*/ val){
   this._set("draggable", val);

comment:3 Changed 10 years ago by zharmir

Yeah, you're right, the one on that page works for me. However, I'm noticing that the "draggable" attribute is not set on the dialog, nor is any explicit draggable option being turned on where the dialog is created.

That prompted me to repeat my tests without adding the "draggable: true" option. I guess the default behavior is to be draggable - we've habitually been specifying it every time, whether we set it to true or false. Anyway, when draggable is not specified, the dialog is draggable and also selectable.

But regardless, I'll attach the file I can reproduce the problem in. We're using dojo 1.7.0.

Changed 10 years ago by zharmir

Attachment: dialogTest.html added

comment:4 Changed 10 years ago by bill

Ah, that makes more sense. Yes, if you specify draggable (or anything) in the constructor parameters, it will be copied to the DOM, but there's no such handling for default values of parameters.

comment:5 Changed 10 years ago by bill

Description: modified (diff)
Milestone: tbd1.8
Owner: set to bill
Status: newassigned
Summary: dijit.Dialog disallows selection of contents when draggableDialog: disallows selection of contents when draggable

comment:6 Changed 10 years ago by bill

Resolution: fixed
Status: assignedclosed

In [27426]:

Don't copy draggable attribute to Dialog.domNode as it prevents text selection, fixes #14452 !strict.

comment:7 Changed 8 years ago by bill

#17231 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.