Button: clicking on edges of button won't submit form

[bill]

The Button template allows for various button styling, such as noir's rounded corner buttons (see ​templateThemeTest.html from 1.0.2.

However, clicking on the edges of the button (which is inside of Button.domNode but not part of the <button> node itself), although it will fire the onClick handler, it won't actually submit the form.

See attached testcase.

Not sure what (if anything) can be done about this but filing ticket for reference for now.

[bill]

put in dijit/tests/form directory

[Douglas Hays]

I don't think this can be fixed w/o moving the button tag to the domNode.

[ninja]

In tundra.css I took the padding out of: .tundra .dijitButtonNode and put it in: .tundra .dijitButtonNode button

Fixes the problem for me... not 100% perfect because the bottom border doesn't show up.. no big deal.. still looks ok. Better than having a button that works only 75% of the time.

[bill]

I don't think this can be fixed w/o moving the button tag to the domNode.

I agree, although I don't see why that's difficult / why we didn't do it in the first place.

Also, one alternative would be to leave the <button> node where it is, but make the button hover effect and click event only on the <button> node, to make things more consistent.

[davidmark]

Replying to bill:

The Button template allows for various button styling, such as noir's rounded corner buttons (see ​templateThemeTest.html from 1.0.2.

However, clicking on the edges of the button (which is inside of Button.domNode but not part of the <button> node itself), although it will fire the onClick handler, it won't actually submit the form.

See attached testcase.

Not sure what (if anything) can be done about this but filing ticket for reference for now.

Sounds like another case of Dijit sacrificing usability for rounded corners or the like. If the theme breaks INPUT elements, it must be fixed or scrapped.

[liucougar]

dup of #11108