FormidableLabs / FormidableLabs/react-live

Standalone `Editor` loses focus after the first keystroke

Ouverte
#415 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
4.6k
Forks
260
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par suivre l’export de standalone Editor et le useLayoutEffect de restauration du focus de use-editable, puis comparez ce chemin avec LiveProvider et LiveEditor. Ajoutez une régression automatisée à l’aide de la reproduction Playwright : saisissez XYZ dans standalone Editor et vérifiez que abcXYZ reste focalisé, tout en préservant le comportement fonctionnel de LiveEditor.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
playwright, react, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
68/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.