Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Standalone `Editor` loses focus after the first keystroke

Open
#415 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
playwright, react, typescript
Domain
frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

bug
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
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 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)
Dominant language
TypeScript
Stars
4.6k
Forks
260
Avg merge
6d 18h
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from FormidableLabs/react-live

All issues in FormidableLabs/react-live

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.