diff --git a/.changeset/funny-mirrors-cough.md b/.changeset/funny-mirrors-cough.md new file mode 100644 index 000000000..f86771670 --- /dev/null +++ b/.changeset/funny-mirrors-cough.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Fixes #5900 diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 8e8a6c41e..3774a8334 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -1941,6 +1941,26 @@ const defaultScrollSelectionIntoView = ( (editor.selection && Range.isCollapsed(editor.selection))) ) { const leafEl = domRange.startContainer.parentElement! + + // COMPAT: In Chrome, domRange.getBoundingClientRect() can return zero dimensions for valid ranges (e.g. line breaks). + // When this happens, do not scroll like most editors do. + const domRect = domRange.getBoundingClientRect() + const isZeroDimensionRect = + domRect.width === 0 && + domRect.height === 0 && + domRect.x === 0 && + domRect.y === 0 + + if (isZeroDimensionRect) { + const leafRect = leafEl.getBoundingClientRect() + const leafHasDimensions = leafRect.width > 0 || leafRect.height > 0 + + if (leafHasDimensions) { + return + } + } + + // Default behavior: use domRange's getBoundingClientRect leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange) scrollIntoView(leafEl, { scrollMode: 'if-needed',