Conversation
use-editable keys its editing setup on the element ref, which is null on the first render. LiveProvider re-renders when its initial transpile resolves, so the setup settles before the user can type. Standalone Editor does not re-render until the first edit, so that edit tears the contenteditable surface down and rebuilds it: `contentEditable` is reset, which blurs the element in Chrome, and the setup's focus() runs while the element is still non-editable. Re-render once after mount so the setup settles before the first edit. Fixes FormidableLabs#415
|
Someone is attempting to deploy a commit to the Nearform Team on Vercel. A member of the Team first needs to authorize it. |
🦋 Changeset detectedLatest commit: 3b8cc3e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
if you can check https://www.npmjs.com/package/next-live |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes #415.
The standalone
Editorlost DOM focus after the first keystroke, so only one character could be typed until the user clicked back in.use-editablekeys its editing-setup layout effect on the element ref, which is stillnullduring the first render.LiveProviderre-renders when its initial transpile resolves, so that effect settles before the user types; the standaloneEditordoes not re-render until the first edit, so the first edit is what makes the effect re-run. The effect's cleanup resetscontentEditable(which blurs the element in Chrome) and its setup then callsfocus()while the element is still non-editable, so focus is not restored.Editornow re-renders once after mount, so use-editable's setup settles before the editor can be edited.Type of Change
How Has This Been Tested?
Added
packages/react-live/src/components/Editor/index.test.js. It mounts the standaloneEditor, drives an edit through use-editable the same way the browser does (DOM mutation plus keydown/keyup), and asserts the editing surface is not torn down and rebuilt.Without the fix it fails:
contentEditableis written twice (undefined, then"plaintext-only"), which is the teardown/rebuild that resets the surface and drops focus. With the fix no writes occur and the edit is applied. Running the same scenario against<LiveProvider>+<LiveEditor>never writescontentEditable, matching the report that the provider path was unaffected.jsdom has no contentEditable editing or focus model, so the browser-level focus loss itself cannot be reproduced in this suite; the regression test asserts the cause instead. I did not run a real-browser test.
Validation, all run locally on the branch:
pnpm test- 6 suites, 20 tests passed.pnpm lint- passed.pnpm run -C packages/react-live typecheck-tsc --noEmitpassed.pnpm build- passed.Checklist: