clicking edge of button does not trigger the button action

[liucougar]

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

[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

[liucougar]

proposed patch for approach 2

[liucougar]

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

[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>.

[liucougar]

updated patch to fix potential ComboButton? issues

[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

[liucougar]

(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)