Skip to content

fix(user-input): atomic chip selection, modifier-key handling, and stale overlay ghost #4902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 13 commits into from
Jun 8, 2026
Merged

fix(user-input): atomic chip selection, modifier-key handling, and stale overlay ghost #4902

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2e0aacd
fix(user-input): atomic chip selection, modifier-key handling, and st…
waleedlatif1 Jun 7, 2026
9567adf
fix(user-input): track raw selection in ref and sync mention menus on…
waleedlatif1 Jun 7, 2026
d1b3562
fix(user-input): translate overlay content instead of scrolling the o…
waleedlatif1 Jun 7, 2026
1a2e63f
fix(user-input): read selection direction at apply time, document edg…
waleedlatif1 Jun 7, 2026
6997d3e
fix(user-input): reconcile textarea DOM with state on selection events
waleedlatif1 Jun 7, 2026
35a2591
fix(user-input): keep Cmd+Backspace native instead of single-chip delete
waleedlatif1 Jun 7, 2026
7c3e298
fix(user-input): record observed selection before reconcile early-return
waleedlatif1 Jun 7, 2026
5b02798
refactor(user-input): extract adoptDomValue; drop flushSync pre-paint…
waleedlatif1 Jun 7, 2026
31c66fa
refactor(user-input): native co-scroll for textarea + overlay, remove…
waleedlatif1 Jun 7, 2026
05af559
refactor(user-input): extract pure snapSelectionToChips with unit tests
waleedlatif1 Jun 7, 2026
d505023
fix(user-input): track prev selection via selectionchange; make chip …
waleedlatif1 Jun 8, 2026
c2624ad
docs(user-input): trim verbose comments in selection logic
waleedlatif1 Jun 8, 2026
e2dfe15
fix(user-input): fall back to setRangeText when execCommand delete is…
waleedlatif1 Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(user-input): extract adoptDomValue; drop flushSync pre-paint… 
… reconcile
  • Loading branch information
@waleedlatif1
waleedlatif1 committed Jun 7, 2026
commit 5b027985ea6f6e0dd2de34eb7d8a32e1c767d7af
21 changes: 14 additions & 7 deletions apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -752,6 +752,16 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
}
}, [onSubmit, textareaRef, resetTranscript])

/**
* Adopts the textarea's DOM value into state. State and DOM can only drift
* when an edit's input event is lost (programmatic edits pair setValue
* synchronously) — the DOM is the user's intent.
*/
const adoptDomValue = useCallback((textarea: HTMLTextAreaElement) => {
valueRef.current = textarea.value
setValue(textarea.value)
}, [])

const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (mentionRangeRef.current && !e.nativeEvent.isComposing) {
Expand Down Expand Up @@ -1060,13 +1070,10 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
// may get superseded — so edge-movement inference stays true to the DOM.
lastSelectionRef.current = { start, end }

// Controlled-value reconciliation: state and DOM can only drift when an
// edit's change event is lost (programmatic edits pair setValue
// synchronously). The DOM is the user's intent — adopt it and let the
// render rebuild the overlay; selection logic resumes on the next event.
// Reconciliation backstop for non-keyboard mutations; the render rebuilds
// the overlay and selection logic resumes on the next event.
if (textarea.value !== valueRef.current) {
valueRef.current = textarea.value
setValue(textarea.value)
adoptDomValue(textarea)
return
}

Expand Down Expand Up @@ -1117,7 +1124,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
const focusPos = textarea.selectionDirection === 'backward' ? start : end
syncMentionState(textarea, textarea.value, focusPos)
syncSlashState(textarea, textarea.value, focusPos)
}, [textareaRef, mentionTokensWithContext, syncMentionState, syncSlashState])
}, [textareaRef, mentionTokensWithContext, adoptDomValue, syncMentionState, syncSlashState])

const handleInput = useCallback(
(e: React.FormEvent<HTMLTextAreaElement>) => {
Expand Down
Loading