Standalone `Editor` loses focus after the first keystroke
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 68/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- playwright, react, typescript
- 領域
- frontend
調査の方向性
まず standalone Editor のエクスポートと、use-editable のフォーカス復元用 useLayoutEffect を追跡し、その経路を LiveProvider および LiveEditor と比較します。Playwright の再現手順を使用して自動リグレッションを追加します。standalone Editor に XYZ と入力し、abcXYZ がフォーカスされたままであることを確認すると同時に、動作している LiveEditor の挙動を維持します。
索引モデルが issue の本文から書いたものです。
説明
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
[email protected] (reproduced against the published package, not a local build).
Reproduction
import { Editor } from "react-live";
<Editor code="abc" language="javascript" onChange={() => {}} />;
Click at the end of the text and type XYZ.
Expected: abcXYZ
Actual: abcX, and document.activeElement is <body>
Automated reproduction
Driving the above page with Playwright:
| case | typed | result | document.activeElement |
|---|---|---|---|
<Editor> standalone |
XYZ |
abcX |
BODY |
<LiveProvider> + <LiveEditor> |
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
<pre>element is not replaced: it is the same node before and after (sameNode: true,isConnected: true). - A real
blurevent fires on it. - Calling
.focus()on the same element afterwards restores normal typing, so the component is otherwise healthy. use-editablerestores focus in auseLayoutEffect, but only when it has a recorded position (if (e.position) { a.focus(); ... }).- The working
LiveProviderpath produces an extra re-render when its async transpile resolves, which appears to be what re-runs that layout effect. StandaloneEditorhas 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)
- 主要言語
- TypeScript
- スター
- 4.6k
- フォーク
- 260
- 平均マージ
- 5日 21時間
- マージ済み PR（30日）
- 5
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
FormidableLabs/react-live のほかの issue
-
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
FormidableLabs/react-live#419 · コメント 2 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
FormidableLabs/react-live#417 ·
-
bug
難易度 3/5 1〜2日 初心者へのやさしさ 52/100
FormidableLabs/react-live#413 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
FormidableLabs/react-live#411 · コメント 1 件 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
FormidableLabs/react-live#410 · コメント 1 件 ·
FormidableLabs/react-live の issue をすべて見る
似ている issue
-
bot:ai-assisted status:untriaged
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
midnightntwrk/midnight-js#1424 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
mksglu/context-mode#1268 ·
メンテナーはふだん 5 日以内に返信
-
[bug] Setup fails with "Cannot find matching keyid" when an older Node's corepack is on PATH対応中かも @EyalPoly が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
MystenLabs/MemWal#1124 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
Edit:オープンcheck:failed streams:edit
難易度 2/5 1〜3時間 初心者へのやさしさ 60/100
iptv-org/iptv#54352 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信