Update Selection #709
Merged
Update Selection #709
Conversation
This file contains 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
When clicking on a config value, we hide the text-area and invisibly swap out to a different text-area. It's almost invisible except that the focus isn't maintained: the user focused the old element but not the new one. Simply adding a call to .focus() puts the cursor in a different place than where the user clicked. This isn't how text controls work and can break a user's flow. The selection cursor isn't updated to the click location in the focus event handler so it was refactored to be a click handler. In the edit event that fires, the scroll position and selection range are taken from the old input and on next tick applied to the new input. This makes the control swapping truly invisible. You still have to focus the text-area before the resize handle will be available though.
Tabbing to the control wasn't giving it focus. Reverted the event back to focus and then wrapped the event body in a `setTimeout([event body], 1)` so it executes after the click event sets the selection range. Now it works for node specific values as well by adapting the selector to the nodeId parameter. Tabbing to the control puts the cursor at the end. Clicking on the control puts the cursor where the user clicks. Highlighting text in the control highlights the same text. Methodology used: We setTimeout(..., 1) to let the click event finish so the cursor location is accurate. After that, we change our form variables normally. Then we collect scroll and caret information. We wait one tick for the form changes we just made to propogate through the UI and then we set the scroll and caret information on the new text-area.
jertel
approved these changes
Jan 9, 2025
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
When clicking on a config value, we hide the text-area and invisibly swap out to a different text-area. It's almost invisible except that the focus isn't maintained: the user focused the old element but not the new one.
Simply adding a call to .focus() puts the cursor in a different place than where the user clicked. This isn't how text controls work and can break a user's flow.
The selection cursor isn't updated to the click location in the focus event handler so it was refactored to be a click handler. In the edit event that fires, the scroll position and selection range are taken from the old input and on next tick applied to the new input. This makes the control swapping truly invisible.
You still have to focus the text-area before the resize handle will be available though.