Opened 10 years ago
Closed 5 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:
- Click into telephone field.
- 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
- 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)
Change History (10)
comment:1 Changed 10 years ago by
comment:2 Changed 10 years ago by
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 10 years ago by
Summary: | ValidationTextBox Does Not Allow Focus After Validation Fails → ValidationTextBox: label node surrounding ValidationTextBox / focus problems after validation error |
---|
comment:4 Changed 10 years ago by
Owner: | set to bill |
---|
comment:5 Changed 10 years ago by
Component: | Dijit → Dijit - Form |
---|
comment:6 Changed 8 years ago by
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 8 years ago by
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 7 years ago by
Owner: | Douglas Hays deleted |
---|---|
Status: | assigned → open |
comment:9 Changed 5 years ago by
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.
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.