(docs-site) 🐛 Fix the cursor position auto-reset while typing in progress #5922
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
Removed the
debounce
in thedocs-site
example editor soreact-live
no longer resets the cursor position while typing. This ensures smooth, predictable typing behavior in the live code editor.Problem
As a part of enabling the support for TypeScript examples in the
docs-site
, we makereact-live
to be a controlled component so that we can able to use the updated code for JSX transpilation when user switches to the JavaScript tab. We debounceonChange
handler. But withdebounce
enabled,react-live
occasionally re-renders out of sync during typing, which auto-resets the cursor/selection position mid-input.Changes
debounce
from the example editor’sonChange
handling in docs-site/src/components/Example/index.tsx.Screenshots
The issue
https://github.com/user-attachments/assets/d8d0d6b5-7838-4213-af69-c7356161b7a7
After the fix
https://github.com/user-attachments/assets/a1965261-b2fc-4e84-97e5-715f60cd34de
Contribution checklist