FormidableLabs / FormidableLabs/react-live
Standalone `Editor` loses focus after the first keystroke
- Lingua principale
- TypeScript
- Stelle
- 4.6k
- Fork
- 260
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
### 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)
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Start by tracing the standalone Editor export and use-editable's focus-restoration useLayoutEffect, then compare that path with LiveProvider and LiveEditor. Add an automated regression using the Playwright reproduction: type XYZ into standalone Editor and verify abcXYZ remains focused, while preserving the working LiveEditor behavior.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- playwright, react, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Attiva
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 68/100