1904255 - Wrong DOMRect is returned for the current caret position in a contenteditable div

Status: UNCONFIRMED

(Core :: DOM: Editor, defect)

Description

[benamrerayane]

Steps to reproduce:

1. Create a div and pass the contenteditable="true" attribute to it
2. Create a function as following:

function getCaretRect(): DOMRect | null {
  const sel = window.getSelection()
  if (!sel || sel.rangeCount === 0) return null
  const range = sel.getRangeAt(0)
  const rects = range.getClientRects()
  console.log(rects)
  if (rects.length === 0) return null
  return rects[0]
}

3. Add a keydown event listener to the div, check if the key is equal to "ArrowLeft", and run the getCaretRect() function.
4. Fill the contenteditable div with a really long line that spans across two lines (line breaks), the first one being longer than the second one
   Here, we have two possibilities:
   First one:
   5.1. Set the caret in the first line somewhere positioned further than the vertical end of the second line.
   6.1. Press the down arrow to get to the end second line.
   7.1. Press the left arrow.
   Second one:
   5.2. Manually set the caret at the end of the second line.
   6.2. Press ctrl + right arrow.
   7.2. Press the left arrow.

Actual results:

I got this in the console: DOMRect { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 }

Expected results:

I expected to get an output like this: { x: 569.11669921875, y: 260.75, width: 0, height: 14, top: 260.75, right: 569.11669921875, bottom: 274.75, left: 569.11669921875 } since that is the result I get when pressing the left arrow in other areas of the div without these steps.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Editor' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.