Cannot edit dojox.mobile.TextBox when inside dojox.mobile.Heading

[ebengtso]

dojox.mobile.TextBox? gets displayed in dojox.mobile.Heading, but I cannot edit or get focus on the textbox.

Here a snipted:

<h1 dojoType="dojox.mobile.Heading" label="header label"> <div style="float:left; margin-top:10px"> <input dojoType="dojox.mobile.TextBox?" selectOnClick="true" id="transactionNumber" placeHolder="Transaction Number"></input> </div> </h1>

[ykami]

Could you try adding position:relative; to your wrapper div?

[ebengtso]

Thanks. Adding position:relative do the wrapping div fixed the issue.

[ebengtso]

Why is this closed as invalid?

The proposed solution does not work on IE.

[ykami]

Eric, please take a look. It is reproducible on IE.

[Eric Durocher]

Right, the Heading calls:

dom.setSelectable(this.domNode, false);

which, on IE, sets the "unselectable" attribute on all children, and makes the INPUT uneditable.

A workaround is to reset unselectable=off, for example:

require([
    "dojo/ready",
    "dojo/dom",
    "dojo/dom-attr"
], function(ready, dom, domAttr){
    ready(function(){
        domAttr.set(dom.byId("transactionNumber"), "unselectable", "off");
    });
});

[Eric Durocher]

In [31218]:

fixes #13846, fix non-editable input elements in Heading widgets on IE < 10. !strict

[Eric Durocher]

Fixed in trunk (so 1.9), tell me if you need a backport to 1.8? Or is the workaround enough for you?

[ebengtso]

perfect. thanks.