FormidableLabs / FormidableLabs/react-live

Standalone `Editor` loses focus after the first keystroke

オープン
#415 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
4.6k
フォーク
260
PR マージ指標
30日以内にマージされた PR はありません

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず standalone Editor のエクスポートと、use-editable のフォーカス復元用 useLayoutEffect を追跡し、その経路を LiveProvider および LiveEditor と比較します。Playwright の再現手順を使用して自動リグレッションを追加します。standalone Editor に XYZ と入力し、abcXYZ がフォーカスされたままであることを確認すると同時に、動作している LiveEditor の挙動を維持します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
playwright, react, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
68/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。