Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#16780 closed defect (invalid)

CheckBox: no id on top node

Reported by: Paul Christopher Owned by: Paul Christopher
Priority: undecided Milestone: tbd
Component: Dijit - Form Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:


See attached test case: The test page contains a checkbox which is created declaratively and which is initally hidden by "display:none".

By clicking on a button,

domStyle.set('mycheck', 'display', 'inline-block');

is called -- without any visible effect: The checkbox is still hidden.

Reason: The wrapping div of a dijit/CheckBox does have no id, but only a widgetid. Only the input element has an id. Calling domStyle makes the input (child) visible, but since its parent container (the widgets top level DOM node/ wrapping div)is still hidden, nothing shows up on the screen.

Attachments (1)

testCheckbox.htm (1.2 KB) - added by Paul Christopher 6 years ago.

Download all attachments as: .zip

Change History (6)

comment:1 Changed 6 years ago by bill

Summary: Cannot show initially hidden checkboxCheckBox: no id on top node

You can do:

domStyle.set(registry.byId('mycheck').domNode, 'display', 'inline-block');

But since the TextBox subclasses all have id's on their top nodes, probably checkbox should do it too for consistency.

Changed 6 years ago by Paul Christopher

Attachment: testCheckbox.htm added

comment:2 Changed 6 years ago by ben hockey

Owner: changed from Douglas Hays to Paul Christopher
Status: newpending

paul christopher,

as you mentioned currently the widget's id is applied to the input element that is part of the template - this is what makes clicking on labels work like they do for native checkbox inputs. if an id was applied to the domNode, it would need to be a different id than the widget's id (i wouldn't want to lose the ability to click labels) so i'd say that bill's approach is still the simplest.

do you have another suggestion?

comment:3 Changed 6 years ago by Paul Christopher

Status: pendingnew


you are perfectly right: Removing the id from the input and putting it on the top-level domNode might remove the ability to check/uncheck the checkbox by clicking on the label.

So Bill's suggestion to use widget.domNode is maybe the only solution -- although maybe not the most intuitive one -- but by design, it is not possible to change this, I guess.

comment:4 Changed 6 years ago by ben hockey

Resolution: invalid
Status: newclosed

it sounds like there isn't a better solution so i'll close this ticket.

comment:5 Changed 6 years ago by bill

What I meant was to add id="widget_${id}" to the root node, as is done for the TextBox widgets (see DropDownBox.html, Spinner.html, and ValidationTextBox.html). The change is trivial and safe.

OTOH it's not done in *Button.html or *Slider.html, and it's unclear why it's done for TextBox widgets, see [9758] and [21560]. So perhaps we are better off removing the extra id for those widgets.

Note: See TracTickets for help on using tickets.