IE8: Wizard close dialog

[acarli82]

Hi, if i open a Dialog with href to a page that contain a Wizard object, when click the next step button the Dialog closed automatically.

This problem is present only into internet explorer 8. In this browser is not present:

• Firefox 3.0.10
• IE6
• IE7

[Adam Peller]

Is this reproducible with one of our tests? If so, please give specific instructions to reproduce. Thanks.

[acarli82]

Is not reproducible with test in release 1.3 But if you want i can create a minimal test.

Hi

[acarli82]

I have add a files for test:

• dialog.html
• wizard.html

Open dialog.html page, click button for open dialog, then click next button.

Hi

[acarli82]

I have do other test, the problem not is in the Wizard component, but in the button element.

I have add this code at wizard.html page test: <button dojoType="dijit.form.Button" onClick="alert()" id="inviaHelp">Button</button>

When i click button the allert appear but when click the alert the dialog box close.

[acarli82]

Hi, i have localize the problem in the Button element. All button in IE8 have type "submit" instead of "button".

You can see this with the test: /dojo/dijit/tests/form/test_Button.html

Why? Who change the type of the button? Thanks

[acarli82]

I have find at this link: ​http://msdn.microsoft.com/en-us/library/ms534696(VS.85).aspx

New for Windows Internet Explorer 8 Internet Explorer 8 and later. The default value of this attribute depends on the current document compatibility mode. In IE8 mode, the default value is submit. In other compatibility modes and earlier versions of Internet Explorer, the default value is button.

[acarli82]

I have resolve with this change at the widget Wizard

_checkButtons: function(){

var sw = this.selectedChildWidget;

var lastStep = sw.isLastChild; this.nextButton.attr("disabled", lastStep); this.nextButton.attr("type", "button"); this._setButtonClass(this.nextButton); if(sw.doneFunction){

console.log(sw.doneFunction); this.doneButton.domNode.style.display = ""; if(lastStep){

this.nextButton.domNode.style.display = "none";

}

}else{

#1438 issue here. this.doneButton.domNode.style.display = "none";

} this.previousButton.attr("disabled", !this.selectedChildWidget.canGoBack); this.previousButton.attr("type", "button"); this._setButtonClass(this.previousButton);

},

[bill]

Ouch, I see that in IE8 on test_Button.html all the dijit.form.Button's have type=submit, even though no type has been specified.

dijit.form.Button sets the default type to button, but the problem is with the parser: it thinks that type has been explicitly set on the srcNodeRef, because node.attributes and node.getAttribute() both indicate so.

Not sure how to deal with this parser problem. (Or rather, this IE8 problem that the parser needs to work around.) Doug, any ideas?

There are some user workarounds, like creating buttons programatically or adding type=button to your markup... but neither is a very good solution.

[Douglas Hays]

I second "Ouch". This isn't technically an IE8 problem since the default value of BUTTON is supposed to be "submit" and not "button" so this may be a Button widget oversight that we're stuck with for backward-compat reasons.
​http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.5
So adding type=button to user markup may be the correct way to fix this for any BUTTONs (widgets or not) that are embedded within a FORM tag, though IE is being evil for falsifying that "type" was explicitly specified in the markup.

[vlad]

I also ran into this problem with latest SVN, was going to submit a bug, but I think this is the same as I am seeing. The wizard within dialog disappears (the whole dialog disappears) if the wizard has more than one page. only happens in IE8

I will attach my test case (since I worked on it and it also shows errors out in Dialog itself (but you have to click continue in the IE8 debugger

to get to the wizard).

Most wizards, I think, are used from within a dialog so this is certainly a show stopper for the Wizard control.

None of the supplied tests use it from within a dialog, that's why it passes.

[vlad]

vlad_dojo test case, the dialog itself also errors

[dante]

doug, is this something that can be addressed? Seems the problem is in dijit.form.Button right?

[bill]

As I wrote above, there's no problem in dijit.form.Button, there is an issue with IE8 and the parser that <button> (with no explicit type setting) is parsed as <button type=submit>. But I don't think that's fixable, just need to tell users to stick type=button on all their buttons.

[Douglas Hays]

There's no way to fix this that I'm aware of. I added a sentence to the Button docs page near the top telling users to add type=button explicitly.

[dante]

this still exists in Wizard. there are buttons in the template.

[dante]

(In [20205]) fixes #9334 - making Wizard workable in Dialog by adding type=button to the embedded inline buttons

[JP]

Adding type="button" resolves this. You will need to add this to the button in the Widget too.

<button dojoType="dijit.form.Button" onClick="handleOnClick()" type="button">Button Text</button>

[bill]

(In [24185]) Refactor parser to allow attributes (for a single node) to be partly specified in data-dojo-props, and partly specified directly ex: value=123. Uses node.attributes to detect which attributes are specified on a node, or for older versions of IE calls cloneNode(false) followed by some regex's on clone.outerHTML.

Due to lowercase/uppercase issues (ex: tabIndex, onClick), and for type conversion, the code still introspects each widget to get it's attribute metadata. In the future, would like to defer/avoid that in the common case. Fixes #10153, #12423, #12476, #10150, #9823, refs #11490 !strict.

Also fixes the problem on IE8 where a button without type=... defaults to type=submit rather than whatever the widget defines the default as, fixes #10163, refs #9334, #8946.

Future updates will be attached to ticket #12476.