FormidableLabs / FormidableLabs/react-live
Standalone `Editor` loses focus after the first keystroke
- Ngôn ngữ chính
- TypeScript
- Star
- 4.6k
- Fork
- 260
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
### Summary
The exported `Editor` component loses DOM focus after the first keystroke when used standalone. Only one character can be typed; subsequent keystrokes are discarded until the user clicks back into the editor.
`LiveProvider` + `LiveEditor` is unaffected, so this only bites consumers using the standalone `Editor` export.
### Version
`react-live@4.1.8` (reproduced against the published package, not a local build).
### Reproduction
```jsx
import { Editor } from "react-live";
{}} />;
```
Click at the end of the text and type `XYZ`.
**Expected:** `abcXYZ`
**Actual:** `abcX`, and `document.activeElement` is ``
### Automated reproduction
Driving the above page with Playwright:
| case | typed | result | `document.activeElement` |
| --- | --- | --- | --- |
| `` standalone | `XYZ` | `abcX` | `BODY` |
| `` + `` | `XYZ` | `abcXYZ` | `PRE` |
Same outcome with 30ms and 250ms between keystrokes, and still `BODY` after a 1.5s pause.
A human tester saw a slightly different variant — two characters landed, then typing became possible again after a pause — so the exact cut-off may be timing dependent, but the first keystroke reliably drops focus.
### Notes from debugging
- The `
` element is **not** replaced: it is the same node before and after (`sameNode: true`, `isConnected: true`).
- A real `blur` event fires on it.
- Calling `.focus()` on the same element afterwards restores normal typing, so the component is otherwise healthy.
- `use-editable` restores focus in a `useLayoutEffect`, but only when it has a recorded position (`if (e.position) { a.focus(); ... }`).
- The working `LiveProvider` path produces an extra re-render when its async transpile resolves, which appears to be what re-runs that layout effect. Standalone `Editor` has no such second render.This suggests the standalone case depends on a re-render it does not reliably get, rather than the blur itself being intentional.
### Related
- #409 (pasting a newline moves the cursor incorrectly)
- #390 (keyboard accessibility / moving focus out of the editor)
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách lần theo export của standalone Editor và useLayoutEffect khôi phục focus của use-editable, sau đó so sánh đường đi này với LiveProvider và LiveEditor. Thêm một hồi quy tự động bằng reproduction của Playwright: nhập XYZ vào standalone Editor và xác minh rằng abcXYZ vẫn được focus, đồng thời giữ nguyên hành vi đang hoạt động của LiveEditor.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- playwright, react, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 68/100