TokenField: scrollCaretIntoView throws "Failed to execute 'setStart' on 'Range'" when the caret is before the trailing <br> #10761

Provide a general summary of the issue

Since react-aria@3.53.0 / react-aria-components@1.22.0, a TokenField with allowsNewlines throws during commit:

TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

The error is thrown inside a layout effect, so it unmounts the tree up to the nearest error boundary.

Stack (from useTokenField.mjs)

useTokenField.mjs:118   scrollCaretIntoView(ref.current)
useTokenField.mjs:517   range = tokenFieldPositionToDOMRange(root, { index: range.endOffset, offset: 0 })
useTokenField.mjs:566   range.setStart(startContainer, startOffset)

Cause

When the value ends with \n, TokenInput renders a trailing <br> as a direct child of the root. When the selection is collapsed at the root level (range.endContainer === root), scrollCaretIntoView passes range.endOffset to getDOMRectPosition. If that offset points at the <br>, this branch runs:

if (child && child.nodeType === Node.ELEMENT_NODE) {
  if (pos.offset > 0) return [child.lastChild, 1];
  else return [child.firstChild, 0];
}

The branch assumes every element child is a token wrapper (<span>​token​</span>). A <br> has no children, so child.firstChild is null and range.setStart(null, 0) throws.

Steps to reproduce

1. Render a TokenField with allowsNewlines and a TokenInput.
2. Type some text, then press Shift+Enter so the value ends with \n.
3. Use the keyboard (arrow keys) to put the caret before the trailing <br>.

Expected

The caret scrolls into view without errors.

Suggested fix

Only treat an element as a token wrapper when it has the zero width space children. Otherwise fall back to getDOMPosition:

if (child?.nodeType === Node.ELEMENT_NODE && child.firstChild) {

Versions

• react-aria 3.53.0 (also checked 3.53.1)
• react-aria-components 1.22.0