Fix/prevent cursor from jumping to end when editing component text - #876
Closed
ivanruizcode wants to merge 1 commit into
Closed
Fix/prevent cursor from jumping to end when editing component text#876ivanruizcode wants to merge 1 commit into
ivanruizcode wants to merge 1 commit into
Conversation
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
1 participant
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.
Inline-edit inputs (shown when double-clicking a canvas component to change its text) rendered the cursor at the end of the field on every keystroke, making it impossible to move back and edit previous words. The inputs were controlled (value + onChange), but they're mounted through react-konva-utils' Html, which renders its children into a separate React root and re-renders them out-of-band on every update. Because that re-render happens outside the root that owns the input, React re-applied the DOM .value on each change and the browser reset the caret to the end.
The fix makes the and <textarea> uncontrolled (defaultValue instead of value) in html-edit.widget.tsx. This is safe because the submit logic already reads the final text directly from the input ref rather than from React state, so no functional behavior changes, the caret now simply stays where the user placed it. Affects all inline-editable components (inputs, textareas, headings, paragraphs, links, etc.) since they share this widget.