Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#10253 closed enhancement (fixed)

DropDownButton: add onClick event

Reported by: Pete Smith Owned by: Douglas Hays
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.4.0b
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by Douglas Hays)

<button dojoType="dijit.form.DropDownButton" label="Hello world" onClick="alert(2)">
		<div dojotype="dijit.Menu">...</div>
	</button>

I get no alert when I click in 1.4.0b2. None of the _clicked() or other methods seem to fly.

Attachments (2)

10253.html (1.6 KB) - added by Douglas Hays 10 years ago.
testcase showing onClick being ignored all the time and not just with widgetsInTemplate=true
test_DD_Button.html (1.9 KB) - added by Pete Smith 10 years ago.

Download all attachments as: .zip

Change History (22)

comment:1 Changed 10 years ago by Pete Smith

another clue ---- if I put this code straight away in my page it is ok. If I put it inside another widget's template, and do the widgetsInTemplate: true - the onclick's don't work, the menu never shows.

Changed 10 years ago by Douglas Hays

Attachment: 10253.html added

testcase showing onClick being ignored all the time and not just with widgetsInTemplate=true

comment:2 Changed 10 years ago by Douglas Hays

Description: modified (diff)

I don't see where onClick was ever supported for DropDownButton? widgets. I think it should be but I couldn't get it to work in any situaton. Please attach a testcase showing if working sometimes.

comment:3 Changed 10 years ago by bill

Milestone: tbd1.5
Priority: highnormal
severity: blockerminor

Also note that you could connect to myButton._onArrowClick or myButton.focusNode.onclick in order to monitor click events, so this isn't a blocker.

And that when using templates you do attaches with dojoAttachEvent="..." not with onClick="..." like in your example above.

comment:4 Changed 10 years ago by Pete Smith

Guys this is a pretty bad bug. I have a custom dijit that extends dropdownbutton and it just failed in production after upgrade to 1.4. Such a basic thing - the ability to connect to a drop down button's onclick is such a core event. I had to hack around it by explicitly this.connect()ing to the focusNode in the startup. It also begs the question why, and if something this basic fails, does it affect other things? Thanks gents .

comment:5 Changed 10 years ago by bill

Resolution: invalid
Status: newclosed

Like Doug said you need to attach a test case. If you are able to reproduce this in a test case (something that works against 1.3 but not 1.4 then reopen this ticket (but don't reopen without a test case).

Changed 10 years ago by Pete Smith

Attachment: test_DD_Button.html added

comment:6 Changed 10 years ago by Pete Smith

Resolution: invalid
Status: closedreopened

Please see attached test case for "myLilButton". I want to be notified of the button's onClick, I did it in <script> blocks but it doesn't work when declared either.

comment:7 Changed 10 years ago by bill

Type: defectenhancement

As expected, your test case doesn't work on 1.3 either. So, I'm marking this as an enhancement request.

comment:8 Changed 10 years ago by Pete Smith

but _onDropDownClick did fire in 1.3, and doesn't in 1.4. I was trying to simplify the issue.

comment:9 Changed 10 years ago by bill

Summary: dijit.form.dropDownButton onClick's don't fireDropDownButton: add onClick event

That's the danger of referencing private methods. _onDropDownClick() disappeared in the refactor to make DropDownButton use the _HasDropDown mixin. I think you could connect to _onDropDownMouse() or openDropDown() instead and it will work, but not sure.

comment:10 Changed 10 years ago by Pete Smith

ok thanks bill, I will stick with my hack for now, I simply added a dojo.connect to the startup and hooked to the focusNode's onclick.

comment:11 Changed 10 years ago by haysmark

In 0.4, the DropDownButton? template defined a public event called onClick that was refactored to _onArrowClicked in 0.9. The logic is:

  • Button, the parent of DropDownButton?, adds an onClick handler in the template.
  • ComboButton?, the child of DropDownButton?, adds the exact same onClick handler as Button, but only to its button element (*not* the drop down arrow)
  • DropDownButton? is one giant drop down arrow; hence it does not define onClick in the template.

By contrast, native selects do define onClick. Furthermore, onClick fires when you click any part of the select, including its drop down.

comment:12 Changed 10 years ago by Douglas Hays

Owner: set to Douglas Hays
Status: reopenednew

comment:13 Changed 10 years ago by Douglas Hays

I need some definitive specs on the correct behavior:
1) will onClick fire on just the Button part or also on the popup widget (like a native SELECT)?
2) will onClick fire when the user clicks the Button part to close the dropdown (native SELECT fires both times)?
3) will the keyboard space/enter also fire onClick (native SELECT does NOT ack space/enter but native BUTTONs do)?

imo, onOpen and onClose should be defined, and onClick could be defined for the benefit of native HTML users porting apps to use dijit and would be defined as the union of onOpen+onClose

comment:14 Changed 10 years ago by bill

Httpete, what exactly did you want to use the onClick event for?

comment:15 Changed 10 years ago by Douglas Hays

Milestone: 1.5future

Waiting on httpete to clarify...

comment:16 Changed 9 years ago by rledousa

I'd also like to see on onClick for DropDownButton?. My use case is the same for any other button - to be notified when the user clicks the button so that I can perform some action or possibly cancel the click event.

comment:17 Changed 9 years ago by Douglas Hays

httpete/rledousa: please see my definitive spec questions from 5 months ago. I need clarification before proceeding on this.

comment:18 Changed 9 years ago by bill

Milestone: future1.5
Resolution: fixed
Status: newclosed

In 1.5, due to the _HasDropDown refactor, onClick is actually working as follows:

1) will onClick fire on just the Button part or also on the popup widget (like a native SELECT)?

--> just on the button

2) will onClick fire when the user clicks the Button part to close the dropdown (native SELECT fires both times)?

--> yes

3) will the keyboard space/enter also fire onClick (native SELECT does NOT ack space/enter but native BUTTONs do)?

--> space/enter also fires onClick

So marking this ticket as fixed.

comment:19 Changed 9 years ago by bill

(In [22762]) [22604] (refs #9945) broke opening a DropDownButton via the space key on IE. Root problem was that the ondijitclick code supresses onkeypress events for the SPACE key (on IE). Also refs #10253. !strict

comment:20 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.