#15700 closed defect (invalid)
placeHolder stays on programmatic focus
Reported by: | Chris2 | Owned by: | Chris2 |
---|---|---|---|
Priority: | undecided | Milestone: | tbd |
Component: | Dijit - Form | Version: | 1.7.3 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
When setting the focus to a dijit.form.TextBox? using .focus()-method the placeHolder stays. But when the user clicks or uses the tab-key to focus the control the placeHolder disappears.
Use-case details:
- several Textboxes are created using the following code:
(TextBoxType? == dijit.form.TextBox?)
var textbox = new TextBoxType({ style: "width: 12em;", name: nodeId, placeHolder: dom.byId(nodeId + "Label").innerHTML }, nodeId); textbox.startup();
- after creation of those TextBoxes? the first one is focused:
require(["dijit/registry"], function(registry) { registry.byId("sirName").focus(); });
BUT, when validating the form on button-click the placeHolder is removed when calling .focus() on an empty TextBox?.
Attachments (1)
Change History (7)
comment:1 Changed 9 years ago by
comment:2 Changed 9 years ago by
Owner: | changed from Douglas Hays to Chris2 |
---|---|
Status: | new → pending |
I need to see a standalone HTML testcase. This is almost certainly a timing issue where focus() is either being called before DOM insertion or something else is stealing focus afterwards, like the browser focusing the body after loading.
Changed 9 years ago by
Attachment: | dojoTest.html added |
---|
comment:3 Changed 9 years ago by
Status: | pending → new |
---|
Attachment (dojoTest.html) added by ticket reporter.
Just added the testcase. The bug occurs in IE9 and in FF13. Also i have noticed when switching to another application and then back to the browser the placeHolder-element disappears in the focused TextBox?.
comment:4 Changed 9 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
Seems to be a timing problem with calling require() AFTER ready. Use this instead and it works:
require(["dojo/ready", "dojo/dom", "dijit/registry", "dijit/form/TextBox"], function(ready, dom, registry, TextBox) { ready(function(){ setDijitTextBox(dom, TextBox, "sirName", "width: 12em;"); setDijitTextBox(dom, TextBox, "firstName", "width: 12em;"); //set focus registry.byId("sirName").focus(); }); });
comment:5 Changed 9 years ago by
Note also that (as documented in the reference guide) you shouldn't use dojo/domReady! with dijit until 2.0.
comment:6 Changed 9 years ago by
So it is necessary to require everything at the beginning what i will eventually need?
some background: i am using the same code for every page in my webapp to inform the current page that its dom is ready. When it is ready the function domIsReady will be called to execute page-specific stuff i.e. create textboxes, radiobuttons, flash-objects, ...
Therefore my current approach was to require the module which are currently needed in the domIsReady-function of the specific page.
I have already tried to use "dojo/ready" instead of "dojo/domReady!":
require(["dojo/ready"], function(ready) { ready(function(){ if(domIsReady && typeof domIsReady == 'function'){ domIsReady(); } }); });
But it does not change anything. It seems to be necessary to require really everything what could be possibly needed, so i have to require all dijits even when the current page does not use any dijit.
I can confirm that
require(["dojo/ready", "dojo/dom", "dijit/registry", "dijit/form/TextBox"], function(ready, dom, registry, TextBox) {
works but it is not what i really wanted. :)
Btw. I just used the textbox-tutorial to learn the new dojo-syntax. in that tutorial "dojo/domReady!" was used so i did not expect that it is currently not recommended. Tutorial: http://dojotoolkit.org/documentation/tutorials/1.7/themes_buttons_textboxes/
looks like a timing issue. since when the call of .focus() is delayed a bit it works.
therefore a (very ugly) workaround could look like this: