1496769 - (stop-editor-using-focus/blur-events) a contenteditable element inside an element with tabindex(which is inside a Shadow DOM), fails to display the caret when the focus is changed inbetween shadow elements

Status: RESOLVED DUPLICATE of bug 1817723

(Core :: DOM: Editor, defect, P3)

Description

[張俊芝(ZHANG Junzhi)]

Attachment: test.html

Please see the uploaded test.html

Comment 1

[張俊芝(ZHANG Junzhi)]

Since the bug is relevant to both the contenteditable feature and the shadow DOM, so I am CC'ing both of you.

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Editor initializes caret/selection at receiving focus event. So, the editable element does not receive focus event or the focus event listener of editor is not shadow DOM aware.

Comment 3

[serguey.kulikov]

Also faced this issue, reproduced here: https://jsfiddle.net/webpadawan/g6vku9L3/

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: slightly different test-case that shows the difference between shadow and non-shadow in the console

In the "move-focus to the inner element inside the shadow DOM" case, in all browsers, there's no extra focus event dispatched.

So editor should probably use a different method other than regular event listeners in order to handle this.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Olli, do we have an easy way to somehow end up dispatching the focus event here at least for the system event handlers? Or should we just move that focus event handler to get notified via nsFocusManager instead or such?

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

If listener is added to chrome event handler, it should get the event. And listener could then use composedTarget

Comment 8

[sshanzel]

I' more than willing to contribute and work on this. Can anyone point me in the direction where I can start? Thank you!

Comment 9

[jerhoyet]

I've been battling with this bug this week. I ended up removing tabindex from my custom element in Firefox, which is obviously not great for a11y. On that note, even with the tabindex attribute removed, the delete key seems to be completely broken.

Comment 11

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I've refactored around the focus/blur event handling of editor in bug 1770874 to make nsFocusManager notify HTMLEditor of focus change. However, it causes different issues, for example, in the case of when <input> or <textarea> has focus in a <div contenteditable>, delayed focus/blur events causing some failures of existing automated tests, etc. So, it's hard to say where you should change, then, you can fix this simply. I still don't have a concrete idea to fix this bug.

Comment 12

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

FYI: Initializing Selection in the focused editing host may run chrome script, it makes the things complicated and harder to fix this.

Comment 13

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

One possible simpler approach is, to make both TextEditor and HTMLEditor handle focus and blur without events, then, to make nsFocusManager directly notify them immediately after dispatching focus/blur events. Although this approach cannot fix the edge cases, e.g., focus/blur events are delayed, but JS tries to use the editor feature.

Comment 14

[Aagash Raaj]

This bug 1496769 was resolved in Firefox's latest release. It seems like blinking caret disappearing in content editable element when focus changes under shadow dom got resolved in the latest release of Firefox browser (v117 - https://www.mozilla.org/en-US/firefox/117.0/releasenotes/).

You can verify the behavior using this test link https://bug1496769.bmoattachments.org/attachment.cgi?id=9014846,

• Working as expected in v117 of Firefox browser
• Having this issue in previous versions (v116 and before).