FormidableLabs / FormidableLabs/react-live

Standalone `Editor` loses focus after the first keystroke

Aperta
#415 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.