Opened 4 years ago
Last modified 3 years ago
#18896 new defect
Placeholder preventing focus on text box (Mobile only)
Reported by: | algiogia | Owned by: | |
---|---|---|---|
Priority: | undecided | Milestone: | 1.14 |
Component: | Dijit - Form | Version: | 1.11.2 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
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="...">
Change History (4)
comment:1 Changed 4 years ago by
Milestone: | tbd → 1.12.1 |
---|
comment:2 Changed 4 years ago by
Milestone: | 1.12.1 → 1.12.2 |
---|
comment:3 Changed 4 years ago by
Milestone: | 1.12.2 → 1.12.3 |
---|
comment:4 Changed 3 years ago by
Milestone: | 1.12.3 → 1.14 |
---|
Moving 1.12.1 tickets to 1.12.2