Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#11108 closed defect (fixed)

clicking edge of button does not trigger the button action

Reported by: liucougar Owned by: liucougar
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.5.0b2
Keywords: Cc:
Blocked By: Blocking:

Description

load http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html

try to move the mouse slowly from outside of the color button towards an edge of the button, stop as soon as the button is hilighted, click the button

the button action is not triggered (the dropdown is not shown), although it does get focus

this is true for all buttons, not only dropdownbuttons

I think in the button, the onClick should be connected to domNode.onclick

Attachments (2)

11108.patch (5.6 KB) - added by liucougar 10 years ago.
proposed patch for approach 2
11108.2.patch (5.5 KB) - added by liucougar 10 years ago.
updated patch to fix potential ComboButton? issues

Download all attachments as: .zip

Change History (9)

comment:1 Changed 10 years ago by bill

This is trickier than it sounds because the onclick hanlder calls click() on a hidden <input> node. If the onclick handler is on Button.domNode than it will catch the programatically generated click event (in addition to the click from the user) and bad things happen.

Also, this is a dup of #6880.

There are a couple of possible solutions:

  • ignore click events if they originated on the hidden input (this.valueNode).
  • rearrange template so that hidden input node and markup are still siblings:
    <div>
        <span>visible button markup</span>
        <input style=display:none>
    </div>
    
    but with no padding/border on any ancestor <div>'s of the "visible button markup"
  • (in conjunction w/above) simplify the Button markup since we don't do rounded corners (using images) in any of the themes anyway

comment:2 Changed 10 years ago by liucougar

Owner: set to liucougar

Changed 10 years ago by liucougar

Attachment: 11108.patch added

proposed patch for approach 2

comment:3 Changed 10 years ago by liucougar

with the proposed patch, robot.button_mouse and robot.button_a11y tests still pass under both FF and IE

comment:4 Changed 10 years ago by bill

I didn't try it but I looked at your patch.

My only concern, besides a remote possibility of breaking custom themes, is that I think I need to add an onclick --> dojo.stopEvent() handler to _HasDropDownButton (see #11094), effectively adding it to ComboButton's second <td>, which will break your change of moving the hidden <input> to the second <td>.

Probably adding a wrapper <div> directly under ComboButton's first <td> makes sense:

<table>
   <tr>
      <td>  <div>icon+label</div>   <input> </td>
      <td>  arrow </td>
  </tr>
</table>

I think we can assume that the ComboButton's label is at least as tall as the arrow portion, so that should fix the issue in this ticket. The first td's class, dojoAttachEvent/Point etc would need to be moved down to the <div>.

Changed 10 years ago by liucougar

Attachment: 11108.2.patch added

updated patch to fix potential ComboButton? issues

comment:5 Changed 10 years ago by liucougar

unfortunately, adding an extra <div> under <td> for combobuton does not fix this bug

instead, I added a third <td> and display hide it, which does this trick, please see the attached patch

comment:6 Changed 10 years ago by liucougar

Resolution: fixed
Status: newclosed

(In [22109]) fixes #11108: rearrange dijit.form.*Button templates to simplify it (no theme now has image based round-cornners) and moved event connections around so there are no dead zone on the button

(toggle button does not suffer from this bug, so no template update for it)

comment:7 Changed 9 years ago by bill

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