Opened 9 years ago

Closed 4 years ago

#11830 closed defect (patchwelcome)

ValidationTextBox: label node surrounding ValidationTextBox / focus problems after validation error

Reported by: Fergus Hadley Owned by:
Priority: high Milestone: 1.13
Component: Dijit - Form Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description

When a validation text box is focussed on, then blurred when the validation is not valid, it is impossible to refocus on the validation textbox.

Test page: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Test Page</title>

	<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet" />
	<script>
	var djConfig = {
		isDebug: false,
		parseOnLoad: true
	}; 
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js" type="text/javascript"></script>


	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit.form.Form");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.ValidationTextBox");
	</script>
</head>
	<body class="tundra">

			
			<form method="post" action="/toad_auth.htm?do=process_login" id="login_form" jsId="login_form" encType="multipart/form-data" dojoType="dijit.form.Form">
				
					<p>
						<label>Company Name <br />
							<input type="text" name="company_name" value="" id="company_name" dojoType="dijit.form.ValidationTextBox" required="false" trim="true" propercase="true" maxLength="50" />
						</label>

					</p>
					<p>
						<label>Telephone<br />
							<input type="text" name="telephone" value="" id="telephone" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Telephone invalid." />
						</label>
					</p>
				</form>
	</body>
</html>

Steps:

  1. Click into telephone field.
  1. Click in company name field without typing anything in the telephone field.

2a. Note that validation warning is shown in telephone field - it is a required field

  1. Try to click into the telephone field again. When the tooltip shows, it removes focus from the text box, making it impossible to type into..

Replicated on: Fiefox 3.6, Chrome 6, Safari 5.0.2 (All on PC)

Works OK on: IE 8 (PC)

The same issue occurs with all themes.

Attachments (1)

label.html​ (1.3 KB) - added by bill 7 years ago.
test case against trunk

Download all attachments as: .zip

Change History (10)

comment:1 Changed 9 years ago by Fergus Hadley

After more testing it seems the issue is with the <label> tag around the dijit.

The error didn't occur with other tags I tried - just labels.

comment:2 Changed 9 years ago by bill

Priority: high → normal

That makes more sense; all our test cases have labels the other way (using for=...), so you should do that too (at least for a workaround). 

<label for="telephone">Telephone</label>
<br />
<input type="text" name="telephone" value="" id="telephone"
dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Telephone invalid." />

There might be some other issues too w/the way you are doing labels, like breaking screen readers or something, but I need to look at the code to see.

comment:3 Changed 9 years ago by bill

Summary: ValidationTextBox Does Not Allow Focus After Validation Fails → ValidationTextBox: label node surrounding ValidationTextBox / focus problems after validation error

comment:4 Changed 9 years ago by Douglas Hays

Owner: set to bill

comment:5 Changed 9 years ago by bill

Component: Dijit → Dijit - Form

Changed 7 years ago by bill

Attachment: label.html​ added

test case against trunk

comment:6 Changed 7 years ago by bill

Owner: changed from bill to Douglas Hays
Status: new → assigned

Doug, not sure why you assigned this to me? It fails even if the Tooltip isn't displayed. Just something weird about that label and ValidationTextBox. Probably we should just close as wontfix? I thought there were other issues when the label surrounds the TextBox and that dijit only supports having them as siblings.

comment:7 Changed 7 years ago by psbucky

Double-clicking DOES work to focus the ValidationTextBox?. I'm adding this in the hope that it's a helpful comment.

I'm actually just happy to learn that there's a simple workaround to my mysterious focus problem.

comment:8 Changed 6 years ago by Douglas Hays

Owner: Douglas Hays deleted
Status: assigned → open

comment:9 Changed 4 years ago by dylan

Milestone: tbd → 1.12
Resolution: → patchwelcome
Status: open → closed

Given that no one has shown interest in creating a patch in the past 4+ years, I'm closing this as patchwelcome.

Note: See TracTickets for help on using tickets.