Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#17080 closed defect (duplicate)

FilteringSelect inside a <label> refuses focus

Reported by: bishop Owned by: Douglas Hays
Priority: undecided Milestone: tbd
Component: Dijit - Form Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

<label> allows implicit and explicit binding of the label to the form control. In the example below, I'm using implicit binding: the label wraps CDATA text and the <input> widget I'm making into a FilteringSelect?.

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='//ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css' />
        <script type='text/javascript'>
            dojoConfig = { parseOnLoad:true }
        </script>
        <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js'></script>
        <script type='text/javascript'>
            require(['dojo/parser', 'dijit/form/FilteringSelect', 'dojo/store/Memory']);
        </script>
    </head>
    <body class='claro'>
        <form>
        <div>
            <label>
                Choose a fruit:
                <div data-dojo-type='dojo/store/Memory'
                    data-dojo-id='store'
                    data-dojo-props='data:[{id:1,name:"Apple"}, {id:2,name:"Pear"}, {id:3,name:"Orange"}]'></div>
                <input data-dojo-type='dijit/form/FilteringSelect'
                    data-dojo-props='store:store, searchAttr:"name"'
                    name='fruit' />
            </label>
        </div>
        </form>
    </body>
</html>

Try clicking the form element to type text. In at least Chrome 26 and FF 20, the input element will not keep its focus. You have to hold the mouse down while typing to input into the field.

Workaround: convert the label to an explicit association, like this:

            <label for='fruit'>Choose a fruit:</label>
            <div data-dojo-type='dojo/store/Memory'
                data-dojo-id='store'
                data-dojo-props='data:[{id:1,name:"Apple"}, {id:2,name:"Pear"}, {id:3,name:"Orange"}]'></div>
            <input data-dojo-type='dijit/form/FilteringSelect'
                data-dojo-props='store:store, searchAttr:"name"'
                name='fruit' id='fruit' />

Since implicit <label>ing is valid, I would expect this markup to work -- or at least be consistent across browsers. However, Dojo is unwittingly rewriting the DOM into an invalid state: label allows *at most one* descendant form input element [1], so I'm not convinced this actually should be supported. (Though I would love it -- I now have a lot of work to redo forms with hundreds of implicitly labelled fields.)

[1] http://www.w3.org/TR/html-markup/label.html#label-constraints

Change History (3)

comment:1 Changed 6 years ago by bishop

Addendum: this works as expected in all browsers if the input is, eg, dijit/form/ValidationTextBox. Speculating, only ComboBox? mixin based widgets will be affected.

comment:2 Changed 6 years ago by bill

Resolution: duplicate
Status: newclosed

Duplicate of #14744.

comment:3 Changed 6 years ago by bishop

Whoops, and I even searched for dups -- sorry! I did notice when I was submitting this case that there was an error "looking up" other tickets.

Note: See TracTickets for help on using tickets.