[lexical] Bug Fix: scroll collapsed selection horizontally in overflow containers by Frank20021 · Pull Request #8495 · facebook/lexical

Frank20021 · 2026-05-11T06:08:03Z

Description

Current behavior: When the caret sits inside a horizontally scrollable block (for example a code block with long lines and overflow-x: auto), moving the collapsed selection with keyboard shortcuts such as Ctrl+ArrowLeft / Ctrl+ArrowRight can place the caret outside the visible scroll region. scrollIntoViewIfNeeded only adjusted vertical scroll and only walked ancestors starting from the editor root, so inner scroll containers were not scrolled on the X axis.

This PR: Extends scrollIntoViewIfNeeded to:

Walk scroll ancestors starting from an optional DOM “chain start” (the caret’s DOM node chain), so nested horizontal scrollers are included.
Apply horizontal scrolling on elements that can scroll horizontally (scrollWidth > clientWidth), updating scrollLeft similarly to the existing scrollTop logic.
Scroll the window on both axes via scrollBy, using visualViewport when present and applying horizontal scroll-padding on the document element in addition to the existing vertical padding.

Collapsed selection updates in LexicalSelection pass the chain start derived from the active Range / Text / HTMLElement target.

Related to #8459 (addresses the horizontal auto-scroll / caret visibility part; VS Code–style word wrap remains a possible follow-up).

Test plan

Automated

pnpm exec vitest run packages/lexical/src/__tests__/unit/LexicalUtils.test.ts -t "scrollIntoViewIfNeeded" --project=unit
New tests: horizontal overflow scrolls right; caret left of the visible region scrolls left.

Manual

Run playground, insert a code block, paste or type a very long single line so a horizontal scrollbar appears on the code block.
Put the caret in the middle of that line; use Ctrl+ArrowRight to move to end of line (or Ctrl+ArrowLeft to start) and confirm the code block scrolls horizontally so the caret stays visible.
Repeat with normal arrow keys along the line to confirm scrolling still feels correct.

Before

Caret could move off-screen horizontally inside the code block while the block’s scrollLeft did not follow.

After

Caret stays within the visible horizontal range of the code block (and other scrollable ancestors) when the collapsed selection is updated.

…tainers

meta-cla · 2026-05-11T06:08:09Z

Hi @Frank20021!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

vercel · 2026-05-11T06:08:09Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	May 15, 2026 11:12pm
lexical-playground	Ready	Preview, Comment	May 15, 2026 11:12pm

meta-cla · 2026-05-11T07:10:20Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

meta-cla · 2026-05-11T07:10:25Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

etrepum · 2026-05-11T19:26:14Z

+  if (selectionTarget instanceof Text) {
+    return selectionTarget.parentElement;
+  }
+  if (selectionTarget instanceof HTMLElement) {
+    return selectionTarget;
+  }


We should never use instanceof with DOM because it does not work across iframes, this is why we have guard functions like isDOMNode, isDOMTextNode, etc.

Frank20021 · 2026-05-12T01:24:52Z

Thanks, fixed by replacing the DOM instanceof checks with Lexical’s cross-frame-safe DOM guard helpers.

________________________________ From: Bob Ippolito ***@***.***> Sent: Monday, May 11, 2026 2:26 PM To: facebook/lexical ***@***.***> Cc: FRANK NAMBEH ***@***.***>; Mention ***@***.***> Subject: Re: [facebook/lexical] [lexical] Bug Fix: scroll collapsed selection horizontally in overflow containers (PR #8495) EXTERNAL EMAIL: Please do not click links or open attachments unless you recognize the sender and know the content is safe. @etrepum commented on this pull request.

________________________________ In packages/lexical/src/LexicalSelection.ts<https://urldefense.com/v3/__https://github.com/facebook/lexical/pull/8495*discussion_r3221570495__;Iw!!NGa5sw!dGyHKWrJ9kXfbij68cAl548mpib1Alg9U-uaFVZtMyZvTsTgI8CbuyBuk2f8jB3_wDwJqiTeivzzCdyOpF-G76vTwuEXDSE$>:

+ if (selectionTarget instanceof Text) {

+ return selectionTarget.parentElement; + } + if (selectionTarget instanceof HTMLElement) { + return selectionTarget; + } We should never use instanceof with DOM because it does not work across iframes, this is why we have guard functions like isDOMNode, isDOMTextNode, etc. — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/facebook/lexical/pull/8495*pullrequestreview-4266744258__;Iw!!NGa5sw!dGyHKWrJ9kXfbij68cAl548mpib1Alg9U-uaFVZtMyZvTsTgI8CbuyBuk2f8jB3_wDwJqiTeivzzCdyOpF-G76vTvDf3_T4$>, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/BKYUZDPHNSTSP3OFAIGCLY342ISQHAVCNFSM6AAAAACYYTXTR6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHM2DENRWG42DIMRVHA__;!!NGa5sw!dGyHKWrJ9kXfbij68cAl548mpib1Alg9U-uaFVZtMyZvTsTgI8CbuyBuk2f8jB3_wDwJqiTeivzzCdyOpF-G76vTkaaeONo$>. You are receiving this because you were mentioned.Message ID: ***@***.***>

etrepum · 2026-05-15T15:54:28Z

+  const element: HTMLElement | null =
+    scrollChainStartElement != null ? scrollChainStartElement : rootElement;


Suggested change

const element: HTMLElement | null =

scrollChainStartElement != null ? scrollChainStartElement : rootElement;

let element: HTMLElement | null = scrollChainStartElement || rootElement;

I don't see a reason to have both an element and a walk variable, let's get rid of this walk variable and use element like we did before. element isn't re-used anywhere so it doesn't make sense to keep the initial value around as a constant.

etrepum · 2026-05-15T15:56:53Z

+  let walk: HTMLElement | null = element;
+
+  while (walk !== null) {
+    const isBodyElement = walk === doc.body;


Suggested change

let walk: HTMLElement | null = element;

while (walk !== null) {

const isBodyElement = walk === doc.body;

while (element !== null) {

const isBodyElement = element === doc.body;

etrepum · 2026-05-15T15:57:07Z

+      }
    } else {
-      const targetRect = element.getBoundingClientRect();
+      const targetRect = walk.getBoundingClientRect();


Suggested change

const targetRect = walk.getBoundingClientRect();

const targetRect = element.getBoundingClientRect();

etrepum · 2026-05-15T15:57:42Z

      break;
    }
-    element = getParentElement(element);
+    walk = getParentElement(walk);


Suggested change

walk = getParentElement(walk);

element = getParentElement(element);

etrepum

While this does follow the input text to and scroll the right it doesn't seem to scroll correctly to the left. For example, create a CodeBlock and type enough text to scroll and then press enter. It will scroll to the left but not all the way. Possibly due to the line numbers.

potatowagon

Review — Scroll Collapsed Selection Horizontally in Overflow Containers

Assessment: Looks good to land ✅

What I verified:

Bug fix logic: The existing scrollIntoViewIfNeeded only handled vertical scrolling. This PR extends it to also handle horizontal scrolling, which is important for code blocks or any container with overflow-x: auto/scroll. The fix adds currentLeft/currentRight/targetLeft/targetRight tracking parallel to the existing vertical logic.
Scroll chain improvement: A new scrollChainStartElement parameter lets the walk begin at the caret's immediate parent rather than the root, so intermediate scrollable containers (e.g., a code block) get scrolled first before bubbling up to the document.
Edge cases: The maxScrollX > 0 guard prevents unnecessary scroll attempts on non-scrollable elements. CSS scroll-padding is correctly accounted for on both axes. The visualViewport path also gets horizontal bounds.
Test coverage: Unit test added that creates an overflow container, positions a selection rect beyond the right edge, and verifies scrollIntoViewIfNeeded scrolls it into view.
CI status: Full CI suite green (40 checks pass).
Risk: Low — extends existing scroll logic in a consistent, parallel manner. The added scrollChainStartElement parameter is optional, so existing callers are unaffected.

— via Navi on behalf of potatowagon

fix(lexical): scroll collapsed selection horizontally in overflow con…

dadfbbf

…tainers

Frank20021 requested review from acywatson, etrepum, fantactuka, ivailop7, potatowagon, takuyakanbr and zurfyx as code owners May 11, 2026 06:08

vercel Bot deployed to Preview – lexical-playground May 11, 2026 06:09 View deployment

vercel Bot deployed to Preview – lexical May 11, 2026 06:09 View deployment

meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 11, 2026

etrepum reviewed May 11, 2026

View reviewed changes

etrepum added the extended-tests Run extended e2e tests on a PR label May 11, 2026

Fix DOM node guards for selection scrolling

f4d4c2c

vercel Bot deployed to Preview – lexical-playground May 12, 2026 01:29 View deployment

vercel Bot deployed to Preview – lexical May 12, 2026 01:29 View deployment

etrepum reviewed May 15, 2026

View reviewed changes

Simplify scrollIntoViewIfNeeded scroll chain loop

355b4ed

vercel Bot deployed to Preview – lexical-playground May 15, 2026 23:12 View deployment

vercel Bot deployed to Preview – lexical May 15, 2026 23:12 View deployment

etrepum reviewed May 19, 2026

View reviewed changes

etrepum marked this pull request as draft May 19, 2026 18:01

potatowagon reviewed Jun 5, 2026

View reviewed changes

potatowagon mentioned this pull request Jun 5, 2026

[lexical][lexical-code][lexical-playground] Feature: Add horizontal auto-scroll and word wrap mode for code blocks #8468

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[lexical] Bug Fix: scroll collapsed selection horizontally in overflow containers#8495

[lexical] Bug Fix: scroll collapsed selection horizontally in overflow containers#8495
Frank20021 wants to merge 3 commits into
facebook:mainfrom
Frank20021:feat/8459-code-block-horizontal-scroll

Frank20021 commented May 11, 2026

Uh oh!

meta-cla Bot commented May 11, 2026

Uh oh!

vercel Bot commented May 11, 2026 •

edited

Loading

Uh oh!

meta-cla Bot commented May 11, 2026

Uh oh!

meta-cla Bot commented May 11, 2026

Uh oh!

etrepum May 11, 2026

Uh oh!

Frank20021 commented May 12, 2026 via email

Uh oh!

etrepum May 15, 2026 •

edited

Loading

Uh oh!

etrepum May 15, 2026

Uh oh!

etrepum May 15, 2026

Uh oh!

etrepum May 15, 2026

Uh oh!

etrepum left a comment

Uh oh!

potatowagon left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const element: HTMLElement \| null =
		scrollChainStartElement != null ? scrollChainStartElement : rootElement;

	const element: HTMLElement \| null =
	scrollChainStartElement != null ? scrollChainStartElement : rootElement;
	let element: HTMLElement \| null = scrollChainStartElement \|\| rootElement;

	const targetRect = walk.getBoundingClientRect();
	const targetRect = element.getBoundingClientRect();

	walk = getParentElement(walk);
	element = getParentElement(element);

Conversation

Frank20021 commented May 11, 2026

Description

Test plan

Automated

Manual

Before

After

Uh oh!

meta-cla Bot commented May 11, 2026

Action Required

Process

Uh oh!

vercel Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meta-cla Bot commented May 11, 2026

Uh oh!

meta-cla Bot commented May 11, 2026

Uh oh!

etrepum May 11, 2026

Choose a reason for hiding this comment

Uh oh!

Frank20021 commented May 12, 2026 via email

Uh oh!

etrepum May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etrepum May 15, 2026

Choose a reason for hiding this comment

Uh oh!

etrepum May 15, 2026

Choose a reason for hiding this comment

Uh oh!

etrepum May 15, 2026

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

potatowagon left a comment

Choose a reason for hiding this comment

Review — Scroll Collapsed Selection Horizontally in Overflow Containers

What I verified:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented May 11, 2026 •

edited

Loading

etrepum May 15, 2026 •

edited

Loading