Opened 7 years ago

Closed 6 years ago

#17115 closed defect (wontfix)

Dialog: ENTER key on text input clicks type=submit button outside of dialog (IE)

Reported by: Randy Hudson Owned by: bill
Priority: undecided Milestone: 1.10
Component: Dijit Version: 1.9.0
Keywords: Cc:
Blocked By: Blocking:

Description

In IE9, Open the dialog and press ENTER. The button outside of the dialog is clicked. Dialog should prevent focus and events from escaping the dialog.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js//dijit/themes/claro/claro.css">
	<script>
		dojoConfig = {parseOnLoad: true}
	</script>
	<script src='http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js'></script>
	<script>
		require(["dojo/parser", "dijit/Dialog", "dijit/form/Button", "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/TimeTextBox"]);

		function doit() {
			dialog.show();
			document.getElementById("No").disabled=false;
		}
	</script>
</head>
<body class="claro">
	<div data-dojo-type="dijit/Dialog" data-dojo-id="dialog" title="Dialog"
		execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
		<div class="dijitDialogPaneContentArea">
			<table>
				<tr>
					<td><label for="loc">Location: </label></td>
					<td><input data-dojo-type="dijit/form/TextBox" type="text" name="loc" id="loc"></td>
				</tr>
				<tr>
					<td><label for="date">Start date: </label></td>
					<td><input data-dojo-type="dijit/form/DateTextBox" data-dojo-id="myStartDate"
						onChange="myEndDate.constraints.min = arguments[0];" type="text" name="sdate" id="sdate"></td>
				</tr>
				<tr>
					<td><button>Yes</button></td>
					<td><button id="No" disabled>No</button></td>
				</tr>
			</table>
		</div>
		<div class="dijitDialogPaneActionBar">
			<button data-dojo-type="dijit/form/Button" type="submit" onClick="return dialog.isValid();">OK</button>
			<button data-dojo-type="dijit/form/Button" type="button" onClick="dialog.hide()">Cancel</button>
		</div>
	</div>

	<p>Open the Dialog any press ENTER</p>
	<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" onClick="doit();">Open Dialog</button>
	<button id="buttonFour" onClick="document.getElementById('buttonFour').innerHTML='clicked';">Watch this Button</button>
</body>
</html>

Attachments (1)

preventDefault_on_enter_key.patch (3.6 KB) - added by bill 6 years ago.
patch that fixes problem but also has the unwanted side effects

Download all attachments as: .zip

Change History (7)

comment:1 Changed 7 years ago by bill

Milestone: tbd1.9.1
Status: newassigned
Summary: ENTER key in a Dialog's text input clicks button outside of dialogDialog: ENTER key on text input clicks button outside of dialog

Agreed. Will fix for 1.10 or if it's a simple stopPropogation() and preventDefault() call on the Dialog.domNode, may add to 1.9.1 too.

comment:2 Changed 7 years ago by bill

Summary: Dialog: ENTER key on text input clicks button outside of dialogDialog: ENTER key on text input clicks button outside of dialog (IE)

It's a strange bug. I thought you were talking about a form submission, but it's actually an onclick event on that button, which is neither focused nor an ancestor of the focused node. Only happens on IE (but IE8, IE9, and IE10). Not sure what's going on.

I can workaround the bug by adding a:

<table onkeydown="arguments[0].preventDefault();">

That's too general because it also prevents the tab key from going to the next field, but you get the idea. Still, not sure if that's the right approach.

comment:3 Changed 7 years ago by Randy Hudson

If you look carefully at the Button's border, you can see it becomes darker, meaning windows thinks it should be the "default" button for that Shell. Windows will send ENTER to a default button if whatever has focus doesn't consume the keydown event or block the traverse event. I'm not sure if these OS events have any javascript equivalents.

comment:4 Changed 7 years ago by bill

Summary: Dialog: ENTER key on text input clicks button outside of dialog (IE)Dialog: ENTER key on text input clicks type=submit button outside of dialog (IE)

Ah right, the button is type=submit (the default type for buttons according to W3C). The problem doesn't happen on chrome and FF because those browsers have the wrong default type for buttons. Probably you just want to set type=button for your button.

comment:5 Changed 7 years ago by bill

Milestone: 1.9.11.10

comment:6 Changed 6 years ago by bill

Resolution: wontfix
Status: assignedclosed

I thought this would be an easy fix: just call evt.preventDefault() on keydown events for the ENTER key.

That does fix the problem listed in this ticket, but it has bad side effects. The Dialog_a11y.html starts failing because the ENTER key can no longer be used to "click" the submit button on the "show close prevention" dialog example. There might be more issues, such as that you can't click the ENTER key to submit a <form> (inside of a Dialog) when focused on an <input> descendant of that <form>.

Anyway, I think the original issue listed here was due to user error: you need to set type=button on the <button> element. Obviously sometimes you do want <button type=submit>, but only when that <button> is inside a <form> and in that case the problem listed in this ticket doesn't occur.

Therefore I'm going to close this as wontfix.

Changed 6 years ago by bill

patch that fixes problem but also has the unwanted side effects

Note: See TracTickets for help on using tickets.