Skip to content

@remotion/studio: Add dropdown type-to-select navigation#7016

Merged
JonnyBurger merged 6 commits intomainfrom
cursor/trivial-issue-resolution-dc94
Apr 8, 2026
Merged

@remotion/studio: Add dropdown type-to-select navigation#7016
JonnyBurger merged 6 commits intomainfrom
cursor/trivial-issue-resolution-dc94

Conversation

@cursor
Copy link
Copy Markdown

@cursor cursor bot commented Apr 7, 2026

Summary

  • Fixes Allow pressing keys in a dropdown to select the right item #7014.
  • Add keyboard type-ahead matching for Studio dropdown menus (MenuContent) so pressing character keys selects matching items.
  • Match against quickSwitcherLabel first, then string label, then string value.
  • Ignore disabled items and dividers during type-ahead selection.
  • Add focused unit tests for matching behavior in menu-typeahead.test.ts.

Testing

  • bun test packages/studio/src/test/menu-typeahead.test.ts
  • bun run build ⚠️ fails in this environment due unrelated package build errors (for example @remotion/promo-pages import/export declarations).
  • bun run stylecheck ⚠️ fails at @remotion/lambda-go#lint because VM Go version is 1.22.2 while package requires >= 1.23.0 (known caveat in repo guidance).
Open in Web View Automation 

Co-authored-by: Jonny Burger <hi@jonny.io>
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bugs Ready Ready Preview, Comment Apr 8, 2026 8:52am
remotion Ready Ready Preview, Comment Apr 8, 2026 8:52am

Request Review

@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Apr 8, 2026

Reviewed PR #7016. Submitted feedback on 5 points: inaccurate PR description re quickSwitcherLabel matching, a redundant cleanup useEffect, the typeahead handler bypassing the keybinding system, an unnecessary onKeyDown wrapper, and a misleading test name. Also checked the new commit (53fcc6e) that dropped the value fallback — no additional issues.

Task list (10/10 completed)
  • Read diff and identify areas of change
  • Read existing MenuContent.tsx for full context
  • Read ComboBox.tsx for ComboboxValue type definition
  • Check PR description claims (quickSwitcherLabel matching)
  • Review menu-typeahead.ts logic
  • Review MenuContent.tsx integration
  • Review test coverage
  • Check example changes
  • Submit review
  • Review new commits pushed during review

Pullfrog  | View workflow run | Triggered by Pullfrog | Using Big Pickle (free) | 𝕏

Copy link
Copy Markdown
Contributor

@pullfrog pullfrog bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

Several issues to address: an inaccurate PR description, a redundant cleanup effect, and the typeahead handler bypasses the existing keybinding system used by all other keyboard handlers in this component.

Pullfrog  | Fix all ➔Fix 👍s ➔View workflow run | Using Big Pickle (free) | 𝕏

return value.value;
}

return null;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR description claims "Match against quickSwitcherLabel first, then string label, then string value" but quickSwitcherLabel is never checked here. The actual behavior — matching label then value — is correct for dropdown type-to-select (since quickSwitcherLabel is a quick-switcher concern, not a dropdown concern), but the description should be updated to match reality.

Comment on lines +260 to +264
useEffect(() => {
return () => {
clearTypeahead();
};
}, [clearTypeahead]);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This second useEffect is redundant. The effect at lines 241–258 already calls clearTypeahead() in its cleanup — both when its dependencies change and on unmount. This effect does nothing that isn't already covered.

Suggested change
useEffect(() => {
return () => {
clearTypeahead();
};
}, [clearTypeahead]);

Comment on lines +241 to +258
useEffect(() => {
if (
!keybindings.isHighestContext ||
!process.env.KEYBOARD_SHORTCUTS_ENABLED
) {
return;
}

const onKeyDown = (event: KeyboardEvent) => {
onTypeahead(event);
};

window.addEventListener('keydown', onKeyDown);
return () => {
window.removeEventListener('keydown', onKeyDown);
clearTypeahead();
};
}, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Every other keyboard handler in MenuContent uses keybindings.registerKeybinding(), but the typeahead adds a raw window.addEventListener('keydown'). This works today because no registered keybindings match single-character keys, but it's an inconsistency that could bite if someone later registers a character-key binding. Consider using keybindings.registerKeybinding with a small wrapper, or at minimum add event.preventDefault() when a typeahead match is found to prevent downstream handlers from also reacting.

return;
}

const onKeyDown = (event: KeyboardEvent) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onKeyDown wrapper adds no value over passing onTypeahead directly:

window.addEventListener('keydown', onTypeahead);
return () => {
  window.removeEventListener('keydown', onTypeahead);
  clearTypeahead();
};

Comment on lines +58 to +61
test('matches visible label when quickSwitcherLabel differs', () => {
expect(findTypeaheadMenuItem({query: 'custom', values})).toBe(null);
expect(findTypeaheadMenuItem({query: 'not', values})).toBe('custom');
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test name says "matches visible label when quickSwitcherLabel differs" but the assertion proves that quickSwitcherLabel is not matched — searching 'custom' (which matches quickSwitcherLabel: 'Custom Label') returns null. The test name should reflect what it actually verifies: that typeahead matches label, not quickSwitcherLabel.

@JonnyBurger JonnyBurger enabled auto-merge April 8, 2026 08:50
@JonnyBurger JonnyBurger merged commit 0abba99 into main Apr 8, 2026
18 checks passed
@JonnyBurger JonnyBurger deleted the cursor/trivial-issue-resolution-dc94 branch April 8, 2026 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow pressing keys in a dropdown to select the right item

2 participants