#11003 closed task (fixed)
Button: refactor to use hidden input and non-button tag
Reported by: | bill | Owned by: | Douglas Hays |
---|---|---|---|
Priority: | high | Milestone: | 1.5 |
Component: | Dijit - Form | Version: | 1.4.0 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
This is a ticket to refactor the button to:
- implement form submission by having a display:none <input>, and (programatically) calling click() on that <input> when the user clicks the visible Button node (assuming the Button is enabled).
- replace the visible <button> node with a <div> (with waiRole=button)
This will solve the following issues
- Rendering glitches on IE6/7: #10802 and many other tickets
- Submitting a form on IE6 by clicking a dijit.form.Button will pass the names/values of all the submit buttons, rather than just the button the user pressed (see #10693, the failure in the Button regression tests on IE6)
- Submitting a form on IE, the value of the button passed to the server is the innerHTML of the <button> tag, not whatever value the user set via value=... (#10834)
- Possible removing hacks like _layoutHackIE7() and whatever changes we've made to compensate for IE adding in unrequested margin to buttons, see #10211
We are going to try to get this into 1.5, given the number of problems that the change can solve. After fixing it the above tickets (some of which are closed as wontfix or worksforme) can be properly closed.
Attachments (1)
Change History (19)
Changed 11 years ago by
Attachment: | 11003.patch added |
---|
comment:1 Changed 11 years ago by
The changes look good, I am getting a failure (on both safari and FF) in test_Button.html though. I get two failures in the new onclick tests, for "onClick::reset: return" and "onClick::reset: empty".
I also tried switching the <button> tag to a <span> and it seems to work fine. I removed some CSS hacks from the button section of dijit.css, and also from Button.js.
comment:2 Changed 11 years ago by
comment:3 Changed 11 years ago by
(In [21894]) Fixes #10693, #10834. Refs #11003. Add hidden INPUT tag to Button templates. The BUTTON tag will invoke the click method of the INPUT tag. This fixes the IE issues with multiple submit buttons and with submit values. The BUTTON continues to have visible rich text content and the INPUT has a simple value name name attribute that actually gets submitted but is otherwise invisible to the user.
comment:4 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:5 Changed 11 years ago by
comment:6 Changed 11 years ago by
comment:7 Changed 11 years ago by
comment:8 Changed 11 years ago by
(In [21981]) Refactoring code to make opening from DropDownButton via keyboard (space/enter key) work on IE8:
- make _HasDropDown setup handlers on the focusNode, rather than domNode (simply by removing _buttonNode attach point), so that those handlers are isolated from the hidden <input> (which also fires a click event), and so the handlers still fire even though the ondijitclick code does a evt.preventDefault()
- connect to onkeydown rather than onkeypress since the ondijitclick's evt.preventDefault() call (in the onkeydown handler) cancels the onkeypress event on IE8.
comment:9 Changed 11 years ago by
comment:10 Changed 11 years ago by
comment:11 Changed 11 years ago by
comment:12 Changed 11 years ago by
comment:13 Changed 11 years ago by
comment:14 Changed 11 years ago by
comment:15 Changed 11 years ago by
comment:16 Changed 11 years ago by
comment:17 Changed 11 years ago by
comment:18 Changed 10 years ago by
Component: | Dijit → Dijit - Form |
---|
patch to support hidden INPUT elements within Button templates