Fix stage direction text input not auto-focusing on add (#1017)#1019
Merged
Conversation
Wrap the focus() call in $nextTick so it fires after Vue's DOM update cycle is fully committed. When a new stage direction is added, ScriptLineEditor.created() is async — it awaits previousLineFn before calling addLinePart(), so ScriptLinePart mounts during a reactive re-render rather than the initial mount sequence. A synchronous focus() during mid-flush is unreliable; deferring to $nextTick fixes this. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions
Bot
added
client
Client Test Results106 tests 106 ✅ 0s ⏱️ Results for commit 499f787. ♻️ This comment has been updated with latest results. |
Python Test Results 1 files 1 suites 1m 21s ⏱️ Results for commit 499f787. ♻️ This comment has been updated with latest results. |
Bootstrap Vue's b-dropdown-item calls closeDropdown() → requestAF(() => hide(true)) after emitting the click. hide(true) triggers focusToggler() which uses $nextTick to restore focus to the toggle button. This ran after our plain $nextTick, stealing focus from the newly added input. Fix: use requestAnimationFrame + $nextTick in ScriptLinePart.mounted(). Our rAF is registered during the post-click microtask phase (ScriptLinePart mounts as part of Vue's reactive flush), so it fires after the dropdown's earlier-registered rAF in the same animation frame. Our subsequent $nextTick is therefore queued after focusToggler's $nextTick, so input focus wins. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
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.
Summary
Root Cause
Bootstrap Vue's
b-dropdown-itemuses this sequence on click:addStageDirection()runscloseDropdown()→requestAnimationFrame(() => bvDropdown.hide(true))hide(true)triggersfocusToggler(), which uses$nextTickto restore focus to the toggle button. A plain$nextTickinScriptLinePart.mounted()ran before the dropdown's rAF fired, so the dropdown's subsequentfocusToggler → $nextTickstole focus back.Fix
Use
requestAnimationFrame + $nextTickinScriptLinePart.mounted():ScriptLinePartmounts as part of Vue's reactive flush (microtask phase), before any animation frame firesrequestAnimationFrameis therefore registered after the dropdown's rAF but in the same frame, so it fires second$nextTickis then queued afterfocusToggler's$nextTick, meaning our input focus winsTest plan
npm run typecheckpassesnpm run lintpasses🤖 Generated with Claude Code