placeHolder stays on programmatic focus

[Chris2]

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:

1. 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();

2. 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?.

[Chris2]

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:

window.setTimeout(function(){
	registry.byId("sirName").focus();
}, 1000);

[Douglas Hays]

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.

[Chris2]

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?.

[Douglas Hays]

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();
        });
});

[bill]

Note also that (as documented in the reference guide) you shouldn't use dojo/domReady! with dijit until 2.0.

[Chris2]

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/