FormidableLabs / FormidableLabs/react-live

Standalone `Editor` loses focus after the first keystroke

Offen
#415 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
4.6k
Forks
260
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
playwright, react, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
68/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.