Opened 5 years ago

Closed 4 years ago

#18550 closed enhancement (patchwelcome)

Select: clicking <label> should focus associated widget

Reported by: dojonovice@… Owned by:
Priority: undecided Milestone: 1.13
Component: Dijit - Form Version: 1.10.4
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

Solution for #18471 ticket is not what I expected.

I was demonstrating missing focus functionality. If user click on the label, it must focus the select field. This functionality is missing because id is assigned to the widget, not to the select element.

Correct HTML behaviour.

        <label for="foo_label">Label</label>
        <select id="foo_label" >
            <option selected value="1">Item 1</option>
            <option value="2">Item 2</option>
        </select> 

Change History (3)

comment:1 Changed 5 years ago by bill

Description: modified (diff)
Summary: 18471 openedSelect: clicking <label> should focus associated widget
Type: defectenhancement

OK, you didn't write that at all in the summary or description of #18471. For the future, please use the "summary" field to list a summary of the problem, not just keywords.

As I wrote in #18471, the correct markup to label a Select is:

<span id="foo_label">Label</span>
<select id="foo" data-dojo-type="dijit/form/Select" aria-labelledby="foo_label">
   ...
</select>

I suppose we (or you) could set up a global listener to notice clicks on nodes associated with aria-labelledby nodes. Not sure if it's worth it. Deliteful/Combobox? has similar code for catching clicks on <label> nodes:

// The fact that deliteful/Checkbox is not an HTMLInputElement seems not being compatible with the default
// "<label for" behavior of the browser. So it needs to explicitly listen to click on associated
// <label for=...> elements.
if (!labelClickHandler) {
        // set a global listener that listens to click events on label elt
        labelClickHandler = function (e) {
                var forId;
                if (/label/i.test(e.target.tagName) && (forId = e.target.getAttribute("for"))) {
                        var elt = document.getElementById(forId);
                        if (elt && elt.render && elt._lbl4 !== undefined) { //_lbl4: to check it's a checkbox
                                // call click() on the input instead of this.toggle() to get the 'change' event for free
                                elt.focusNode.click();
                        }
                }
        };
        this.ownerDocument.addEventListener("click", labelClickHandler);
}

comment:2 Changed 5 years ago by dojonovice@…

I was testing your solution before and it didnt work. If I clicked on label, no focus was set to select and I wasn't able to use keys as navigation in select.

comment:3 Changed 4 years ago by dylan

Milestone: tbd1.12
Resolution: patchwelcome
Status: newclosed

Given that no one has shown interest in creating a patch in more than a year, I'm closing this as patchwelcome. Please let us know if you would like to get involved in helping make this change to Dojo!

Note: See TracTickets for help on using tickets.