FormidableLabs / FormidableLabs/react-live

Standalone `Editor` loses focus after the first keystroke

Abierto
#415 0 comentarios 0 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
4.6k
Forks
260
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
playwright, react, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
68/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.