facebook / facebook/lexical

Bug: Clicking on the image in mobile scrolls up

Open
#9,112 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

Lexical version: 0.49 lastest, iOS 26

## Steps To Reproduce

1. Insert the image in the playground
2. Click on the image

[Link to code example](https://playground.lexical.dev/#doc=H4sIAAAAAAAAE-1ZzW7cNhB-lSl78EXeXSduY-8pQIImadOihY0GQdHDiJqVmKU4KjlaWTAMFH2Fnnrqu_UJ-ggFKa9_FkHq2IqxAXxacUh9M8MZzd-eKiqMsD8SFFLzU-WZJf7qytjCk1PzXzYWBQkaq-azTC3Y1yjpseaC1Fy5SLEqU0F6GwkqU0InoubqDVnNNYEwSEXQWOxLz60r4pG-iYfTyUytyAfDTs33zn7NVGE8aUlr11p7yTViG1eQGyQ4x6gIC-PKazCZEizj3p46y0ZS55UDjYGg5xY68gQdu4K8cSV0FUrSMbeol5DzCawJLMI1mAD__P4nGNkJiVxQ3pawMtRlECruIkik69Z7cgIhWgd4kYiDwSbwllvQ6KAwAXNLYATyHhpPIcT32aXTgUSMKwNoduLZgnFXJNm1tJAI3HPrIWhP5ABdAcJladdiXIq3hpuMa7PfWha6DjKWmY6vuVq8eYSCagZyK-PZ1fF-89ZYgc5IBR9SLHuvGHtf30SOp5ZOjEY79YRaPp7LjZSdwLHvQfomWs642yhzEzYhfcYD4qdQ47aWeHQT8MIsFhS_qk8l_HA6jPyJNOix9NhUm4GNTuSbS_ni8mgt02gf0fe4JAitT8FbV6SXwO0Q0VboDbcBGtuWxoV1eBFmm-OVKIU2MLSBbmHWG4n4ZYWhEizDJf45ZTzLsoenuzFgGHYhqvjF1tn4gekD0wemD0y3h-npGsvUWNIGDlo5HoLrW7KWO1hY7sinLBJLslCZhYAlF8O6xmaQ_PQGTcvH65pArkXws7NMVWTK6jxD4MkbU0il5l_NZpmKhfqztUgLtIEyFbxWczXFEEjCtE867Q467a5wdfgyrGjyrok5qRugZp9bLfAqNQs7BVizTPXAwrgilQM1ewLM4-ProdjNUnek0c23LlGOdBs_m2CGQuh_6ppRuJ1fK3SUB5M6phEv1Rq33LhPT3b9rqAvSS5WRqJow6L1NlZbIk2YT6fnfc6koNVU3bWQhoJ1GysujHqkzjR5mXEDlGE3cp1tTRAjVG_cxAptS2Oa8tm1KlpzQbFjj134fTjSCyMv2xw8NRxiJO230pVKI1WbTzTX0wVqypmXa_e6k2fdq8s8Gs1oP16OMZK_xLYqJ1gkyn14TUV-O2POBxxlKp5oWqNx0wb1EksK663dKyPIz8adHo9mzW_Z3F_AeW6CZl_AEfkV-a10omIQMXmRcSsjNP2ufrHf_eTc88O7ZbKYt3QcCqfBVpqPENb36jf7t0TcQIuk42E3b60lSQqjlytT9taOV22-xiC2z6CjHR_TpAuCTmwPWMQpP2hmC446WBBK6ykMfy-YcGXoO4EjhvpihJVK0pR98zidr9LsviKXNhydCJQkgNFgTt9tXiW8JPdevf79-68_LpGp5ndm46a1xRB-wPpiHypsmj7UxtI2hatb1eKjdGeZshjkCFdUqPnek4ODRwezxwf7e08OMxW49ZquJc2rb6vZZP9wMlNn_wGwCLzUABsAAA)

## The current behavior

NodeSelection is activated, the browser scrolls up and the image exits the viewport

https://github.com/user-attachments/assets/372d155c-3156-411a-a391-44b2c4acc0d5

## The expected behavior

There shouldn't be any scrolling when clicking on a decorator that activates NodeSelection. Ideally, there should be scrolling to the visible node, but perhaps this should be handled individually by each node.

## Impact of fix

The issue occurs when clicking on any nodes that use the [`BlockWithAlignableContents`](https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx) wrapper or [useLexicalNodeSelection](https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/useLexicalNodeSelection.ts) with a click handler as in the image. Such nodes become unusable and the user has to scroll to them every time he wants to select them with a touch

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the linked Lexical Playground on iOS by inserting and clicking an image. Read packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx and packages/lexical-react/src/useLexicalNodeSelection.ts, then trace the click handler that activates NodeSelection. Done means clicking the image or another affected decorator does not scroll it out of the viewport while selection still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
70/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.