Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#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:


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);
  1. after creation of those TextBoxes? the first one is focused:
require(["dijit/registry"], function(registry) {

BUT, when validating the form on button-click the placeHolder is removed when calling .focus() on an empty TextBox?.

Attachments (1)

dojoTest.html (2.0 KB) - added by Chris2 10 years ago.

Download all attachments as: .zip

Change History (7)

comment:1 Changed 10 years ago by 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:

}, 1000);

comment:2 Changed 10 years ago by Douglas Hays

Owner: changed from Douglas Hays to Chris2
Status: newpending

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 10 years ago by Chris2

Attachment: dojoTest.html added

comment:3 Changed 10 years ago by Chris2

Status: pendingnew

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

Last edited 10 years ago by Chris2 (previous) (diff)

comment:4 Changed 10 years ago by Douglas Hays

Resolution: invalid
Status: newclosed

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) {
                setDijitTextBox(dom, TextBox, "sirName", "width: 12em;");
                setDijitTextBox(dom, TextBox, "firstName", "width: 12em;");

                //set focus

comment:5 Changed 10 years ago by bill

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

comment:6 Changed 10 years ago by 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) {
		if(domIsReady && typeof domIsReady == 'function'){

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:

Note: See TracTickets for help on using tickets.