Bug: Clicking on the image in mobile scrolls up
- 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
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