Label elements aren't firing events properly when "contenteditable".

• Component: DOM
• Status: RESOLVED CONFIGURATION CHANGED

[Skyler Brungardt]

Overview:

<label> elements with the contenteditable attribute set to "true" don't fire events properly – they should fire keyboard events for keydown, keyup, keypress, along with events for blur and focus, and only fire an 'input' event.  Comparably, a <div> fires all of the events properly.

Steps to Reproduce:

Visit this example: http://jsfiddle.net/wtJVd/10/

Open the error console.  Try focusing, blurring, and typing on the div element in the example, and then try on the label element.  Notice which events are logged to the console, and which aren't.

Actual Results:

The only function assigned to an event listener on the label element is the function assigned to the 'input' event.

Expected Results:

All of the functions should get called for both elements on both events.

Build Date & Platform:

2013-03-12, Version 6.0.2 (8536.26.17, 537+), Mac OS 10.8.2

Other Builds & Platforms:

Existent in other browsers based upon Webkit in both Mac OS and Windows (e.g. Chromium).  Not present in Firefox.

[Alexander Shalamov]

At the moment, label element is not focusable, therefore, onfocus and onblur events are not fired, even when label has contenteditable attribute set.

[Skyler Brungardt]

I'm guessing that label elements aren't generally focusable due to their relationship with input elements.  Seems that they should be focusable if they're contenteditable, however.

[Lucas Forschler]

Mass move bugs into the DOM component.

[Ahmad Saleem]

I am getting following behaviour using attached JSFiddle across browsers:

*** Safari 15.6 on macOS 12.5 ***

1) Click on <div>, it shows "div focus" in console
2) Click on <label>, it shows "div blue" and "label focus" an then if I move to other browser, it shows <label blur>
3) While in <label focus>, if I press Key Up and Down, it also records the event and does not loss focus.

*** Chrome Canary 106 ***

1) Click on <div>, it shows "div focus" in console
2) Click on <label>, it shows "div blue" and "label focus" an then if I move to other browser, it shows <label blur>
3) While in <label focus>, if I press Key Up and Down, it also records the event and does not loss focus.

*** Firefox Nightly 105 ***

1) Click on <div>, it shows "div focus" in console
2) Click on <label>, it shows "div blue" and "label focus" an then if I move to other browser, it shows <label blur>
3) While in <label focus>, if I press Key Up and Down, it also records the event and but on keydown, it losses focus and have to click again on label field.


___

Since all browsers match each other exception with Firefox losing focus on keydown for label. I am not sure on Firefox beahvior so I will leave it to someone else to comment and mark this as "RESOLVED CONFIGURATION CHANGED" or "RESOLVED WONTFIX" or if need to aligned with Firefox then as "New". Thanks!