facebook / facebook/lexical

Bug: After moving Selection, the small keyboard does not automatically pop up and cannot continue editing

Open
#6,512 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
57

Description

Hello, I want to implement a custom image using DecoratorNode. However, I found that if there's only one Image node under the root element, it's quite difficult to insert content before or after it. I discovered that enabling the BlockCursor can solve this issue, but I encountered several strange behaviors during my usage:

1. When clicking on the blank area of the editor, the BlockCursor does not appear automatically. It only appears if you select the image and then switch using the arrow keys.
2. I tried using RangeSelection to show the editor's built-in BlockCursor, but I found that even though the BlockCursor moved to the correct position, I still couldn't input content (the virtual keyboard didn't pop up on mobile devices). Only after clicking again could I focus and input content.
3. click image,the virtual keyboard did not pop up when focused

### Steps To Reproduce

- Go to [demo](https://codesandbox.io/p/devbox/dank-rgb-rdmyzj?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzqdq6sv00073b6lu2ccw387%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzqdq6su00023b6luf53oavj%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzqdq6su00043b6lymvmwwck%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzqdq6su00063b6lzerazgd0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzqdq6su00023b6luf53oavj%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzqdq6su00013b6l2ba729sn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clzqdqona00123b6lnnazrh5c%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A17%252C%2522startColumn%2522%253A24%252C%2522endLineNumber%2522%253A17%252C%2522endColumn%2522%253A24%257D%255D%257D%252C%257B%2522id%2522%253A%2522clzqe73ct00023b6l6pgaz5ic%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fassets%252Flexical%252Ftheme%252FmainTheme%252Findex.less%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzqdq6su00023b6luf53oavj%2522%252C%2522activeTabId%2522%253A%2522clzqdqona00123b6lnnazrh5c%2522%257D%252C%2522clzqdq6su00063b6lzerazgd0%2522%253A%257B%2522id%2522%253A%2522clzqdq6su00063b6lzerazgd0%2522%252C%2522activeTabId%2522%253A%2522clzqf8xs4001h3b6l8e9q0bxr%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clzqf8xs4001h3b6l8e9q0bxr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clzqdq6su00043b6lymvmwwck%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzqdq6su00033b6lofud77op%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clzqdq6su00043b6lymvmwwck%2522%252C%2522activeTabId%2522%253A%2522clzqdq6su00033b6lofud77op%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
- click insert image
- click select prev
- Type 'abcde'
- click block cursor
- Type 'abcde'
- click other editor blank area,can't change block cursor position, It only appears if you select the image and then switch using the arrow keys.

### Screenshots

pc:
https://github.com/user-attachments/assets/b40c7863-eca5-4181-979e-3ac6048750c4
mobile:
https://github.com/user-attachments/assets/eb32f292-2d0e-4098-9c30-adc264b00aee

### Device Info
Smartphone:
Device: Xiaomi14Pro
OS: HyperOs 1.0.45
Browser: Chrome

Pc:
Device: MacBook Pro 2021
OS: 14.4.1
Browser: Chrome 126.0.6478.183

### The expected behavior
- blockCursor can input text after update Selection
- in mobile, when blockCursor show, virtual keyboard can pop up
- when image selected, virtual keyboard can pop up
- clicking on the blank area of the editor, the blockCursor can appear automatically

### Impact of fix
Fixing this issue can improve the usability of custom nodes

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.