Placeholder preventing focus on text box (Mobile only)

[algiogia]

I've configured a text box as follows

<input class="form-control" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="id:'${id}_building'" placeHolder="Building number">

Which DOJO renders as an <input> field plus a <span> for the placeholder:

<div>

<input type="text" id="x_building" class="..."> <span class="...">Building number</span>

</div>

This works fine on desktops but causes issues on mobile devices. For some reason, when clicking on the field the focus switches to the <span>, hiding the keybord and preventing the user from inputting text. This only happens if the user click on the placeholder, while clicking on the empty part of the field correctly sets the focus on the text box.

As a work-around, we have changed the syntax to

<input class="form-control" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="id:'${id}_building',placeholder:'Building number'"> (Note "placeholder" is all lowercase)

This way DOJO doesn't create a separate span but relies on the HTML5 placeholder attribute:

<input type="text" id="x_building" placeholder="Building number" class="...">

[dylan]

Moving 1.12.1 tickets to 1.12.2