Closed Bug 1496769 (stop-editor-using-focus/blur-events) Opened 6 years ago Closed 8 months ago

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


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




Tracking Status
firefox64 --- affected


(Reporter: zjz, Unassigned)


(Blocks 4 open bugs)



(2 files)

Attached file test.html
Please see the uploaded test.html
Since the bug is relevant to both the contenteditable feature and the shadow DOM, so I am CC'ing both of you.
Blocks: 97284, shadowdom
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.
Priority: -- → P3
Also faced this issue, reproduced here:
Depends on: 1512043
No longer depends on: 1512043
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.
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?
Flags: needinfo?(bugs)
See Also: → 1489440

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

Flags: needinfo?(bugs)
Component: DOM → DOM: Core & HTML

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

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.

Alias: stop-editor-using-focus/blur-events
Severity: normal → S3
Component: DOM: Core & HTML → DOM: Editor
Depends on: 1680611, 1770874, 1770684
OS: Unspecified → All
Hardware: Unspecified → All

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.

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

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.

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 -

You can verify the behavior using this test link,

  • Working as expected in v117 of Firefox browser
  • Having this issue in previous versions (v116 and before).
Closed: 8 months ago
Duplicate of bug: 1817723
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.