Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#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

  1. Rendering glitches on IE6/7: #10802 and many other tickets
  1. 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)
  1. 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)
  1. 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)

11003.patch (14.1 KB) - added by Douglas Hays 9 years ago.
patch to support hidden INPUT elements within Button templates

Download all attachments as: .zip

Change History (19)

Changed 9 years ago by Douglas Hays

Attachment: 11003.patch added

patch to support hidden INPUT elements within Button templates

comment:1 Changed 9 years ago by bill

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 9 years ago by bill

Oh nevermind, the above failures are because your tests depend on #11005 being fixed. I checked in your patch for #11005 and now those errors don't occur.

comment:3 Changed 9 years ago by Douglas Hays

(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 9 years ago by bill

Resolution: fixed
Status: newclosed

(In [21895]) Converting <button> tags to <span> tags to avoid rendering problems on IE and to eliminate workaround code for (some of) said rendering problems. Fixes #11003, #10802 !strict.

comment:5 Changed 9 years ago by bill

(In [21904]) Make focus border rectangular rather than irregular. Refs #11003.

comment:6 Changed 9 years ago by bill

(In [21905]) This BIDI workaround code (for tooltip placement in RTL mode) is no longer needed on IE6 or IE7, and it actually messes up display of buttons with tooltips on IE7, making them stretch the width of the viewport. Refs #3893, #11003.

comment:7 Changed 9 years ago by bill

(In [21956]) since dijit.form.Button widget no longer has <button> node, refs #11003

comment:8 Changed 9 years ago by bill

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

Fixes #11040, refs #11003.

comment:9 Changed 9 years ago by bill

(In [21983]) Make focus border rectangular rather than irregular. Refs #11003.

comment:10 Changed 9 years ago by bill

(In [22056]) now that <button> has been converted to <span> these rules are no longer needed, refs #11003

comment:11 Changed 9 years ago by bill

(In [22061]) now that <button> has been converted to <span> this rules is no longer needed, refs #8309, #11003

comment:12 Changed 9 years ago by bill

(In [22065]) Limit the height:100% setting on dijitArrowButtonInner to Spinner. It's not needed anywhere else because we use <table> or vertical-align:middle to center the arrow, and it was breaking DropDownButton in quirks mode. Fixes #11082, refs #11003

comment:13 Changed 9 years ago by bill

(In [22084]) Center Select's arrow button in a11y by removing the height:100% setting for Select's dijitArrowButtonInner. It's not needed, because Select uses a <table> and that can easily center the arrow (either text or icon). Refs #11003.

comment:14 Changed 9 years ago by bill

(In [22088]) Forgot that INPUT.dijitInnerButton should still be displayed in high contrast mode, because those nodes are used to show both the icon (in normal mode) or the character (in high contrast mode). Refs #11003.

comment:15 Changed 9 years ago by bill

(In [22387]) Make hidden <input> tag visibility:hidden rather than display:none, so that on webkit, user can still submit forms by pressing ENTER while focused on an <input>. Refs #11003, fixes #11275.

comment:16 Changed 9 years ago by bill

(In [22392]) [22084] accidentally centered the text of the Select widget, it should be left aligned (or right-aligned in RTL mode). Refs #11003.

comment:17 Changed 9 years ago by bill

(In [22435]) type="button" is meaningless on a <span> tag, it's just leftover from when we were using a <button> tag. refs #11003, 2718.

comment:18 Changed 8 years ago by bill

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