Opened 7 years ago

Closed 22 months ago

#11830 closed defect (patchwelcome)

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

Reported by: voidstate 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 5 years ago.
test case against trunk

Download all attachments as: .zip

Change History (10)

comment:1 Changed 7 years ago by voidstate

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

  • Priority changed from high to 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 7 years ago by bill

  • Summary changed from ValidationTextBox Does Not Allow Focus After Validation Fails to ValidationTextBox: label node surrounding ValidationTextBox / focus problems after validation error

comment:4 Changed 7 years ago by doughays

  • Owner set to bill

comment:5 Changed 6 years ago by bill

  • Component changed from Dijit to Dijit - Form

Changed 5 years ago by bill

test case against trunk

comment:6 Changed 5 years ago by bill

  • Owner changed from bill to doughays
  • Status changed from new to 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 4 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 4 years ago by doughays

  • Owner doughays deleted
  • Status changed from assigned to open

comment:9 Changed 22 months ago by dylan

  • Milestone changed from tbd to 1.12
  • Resolution set to patchwelcome
  • Status changed from open to 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.