fix(hotkeys): prevent infinite loop in HotkeyHelpModal componentDidUpdate

[patrickpaul]

Summary

• Fixes an infinite componentDidUpdate loop in HotkeyHelpModal when the modal opens with no typed hotkeys registered
• The guard condition !prevType was always true when prevType was already null, causing repeated setState({ currentType: null }) calls and triggering React's maximum update depth error
• Adds a && this.types.length guard so setState is only called when there are types to select from

Root Cause

When HotkeyHelpModal is opened by a HotkeyLayer that has no hotkeys registered (e.g., in a Module Federation setup where the host and remote have separate box-ui-elements copies), getActiveTypes() returns an empty array. The existing code path:

if (!prevType) {
    this.setState({
        currentType: this.types.length ? this.types[0] : null,
    });
}

Sets currentType to null (since this.types is empty), which triggers another componentDidUpdate where prevType is still null, creating an infinite loop.

Fix

if (!prevType && this.types.length) {
    this.setState({
        currentType: this.types[0],
    });
}

Only call setState when there are actually types available. The render() method already returns null when currentType is falsy, so the modal correctly won't display.

Test Plan

• Added unit test verifying setState is not called when no types are available
• All existing tests pass (186 tests across 7 suites)

Summary by CodeRabbit

• Bug Fixes

  • Fixed a potential issue in the hotkey help modal that could occur when no hotkey types are available.

• Tests

  • Added test coverage for edge cases in the hotkey help modal to ensure stable behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 025c0b0c-18ca-45c4-bdac-c55d5cbace92

📥 Commits

Reviewing files that changed from the base of the PR and between 161fde5 and 62037e5.

📒 Files selected for processing (2)

• src/components/hotkeys/HotkeyHelpModal.js
• src/components/hotkeys/__tests__/HotkeyHelpModal.test.js

---

Walkthrough

Refines the componentDidUpdate logic in HotkeyHelpModal to properly set currentType when hotkey types are available, and adds a test case verifying that opening the modal with no available types doesn't trigger unwanted state updates.

Changes

Cohort / File(s)	Summary
HotkeyHelpModal Component & Tests src/components/hotkeys/HotkeyHelpModal.js, src/components/hotkeys/__tests__/HotkeyHelpModal.test.js	Fixed componentDidUpdate logic to ensure currentType is set to the first type only when types exist and prevType is falsy, preventing null assignment. Added test case validating that setState is not called when opening the modal with no available hotkey types.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #4382: Modifies HotkeyHelpModal's componentDidUpdate behavior for handling hotkey types and currentType assignment, directly related to this fix.

Suggested labels

ready-to-merge

Suggested reviewers

• tjuanitas
• jpan-box

Poem

🐰 A modal that clicked with care,
No more null types floating there,
When types are gone, we skip the dance,
A test ensures no second chance,
Logic refined, a rabbit's repair! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main change: preventing an infinite loop in HotkeyHelpModal's componentDidUpdate method.
Description check	✅ Passed	The description is comprehensive and well-structured, covering summary, root cause, fix, and test plan with code examples and verification of test results.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}