Opened 3 years ago

Last modified 20 months 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 2 years ago by dylan

Milestone: tbd1.12.1

comment:2 Changed 2 years ago by dylan

Milestone: 1.12.11.12.2

Moving 1.12.1 tickets to 1.12.2

comment:3 Changed 2 years ago by dylan

Milestone: 1.12.21.12.3

comment:4 Changed 20 months ago by dylan

Milestone: 1.12.31.14
Note: See TracTickets for help on using tickets.