Skip to content

Fix: Browser Warnings when closing keyboard shortcut modal#69929

Merged
Mamaduka merged 2 commits intoWordPress:trunkfrom
Debarghya-Banerjee:fix/69928-warning-errors-when-closing-keyboard-shortcuts
Apr 17, 2025
Merged

Fix: Browser Warnings when closing keyboard shortcut modal#69929
Mamaduka merged 2 commits intoWordPress:trunkfrom
Debarghya-Banerjee:fix/69928-warning-errors-when-closing-keyboard-shortcuts

Conversation

@Debarghya-Banerjee
Copy link
Copy Markdown
Contributor

@Debarghya-Banerjee Debarghya-Banerjee commented Apr 17, 2025 •
edited
Loading

What?

Closes

Fixes #69928

Fixes a React warning that occurred when the KeyboardShortcutHelpModal rendered and triggered a store update during render.

Warning: Cannot update a component (`DynamicShortcut`) while rendering a different component (`KeyboardShortcutHelpModal`). To locate the bad setState() call inside `KeyboardShortcutHelpModal`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack
    at KeyboardShortcutHelpModal (index.js:89:2)
    at MoreMenu (index.js:26:14)
    at div (<anonymous>)
    at ContextProvider (<anonymous>)
    at ScopedContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at ScopedContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at ScopedContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at ContextProvider (<anonymous>)
    at LMDWO4NN.js:19:32
    at UnforwardedToolbarContainer (toolbar-container.tsx:21:4)
    at BaseContextSystemProvider (context-system-provider.js:94:39)
    at UnforwardedToolbar (index.tsx:24:3)
    at NavigableToolbar (index.js:207:2)
    at div (<anonymous>)
    at Header (index.js:23:2)
    at BlockRefsProvider (block-refs-provider.js:9:38)
    at Provider (index.tsx:59:2)
    at index.js:67:14
    at with-registry-provider.js:29:7
    at SidebarEditorProvider (sidebar-editor-provider.js:17:2)
    at SidebarBlockEditor (index.js:38:2)
    at ErrorBoundary (index.js:22:3)
    at FocusControl (index.js:20:41)
    at SidebarControls (index.js:9:2)
    at SlotFillProvider (slot-fill-provider.tsx:98:2)
    at SlotFillProvider (provider.tsx:110:37)
    at Provider (index.tsx:59:2)
    at CustomizeWidgets (index.js:17:2)

Why?

  • This happened because registerShortcut() was being called directly inside the render body of KeyboardShortcutHelpModal, which caused keyboardShortcutsStore to update while DynamicShortcut was also subscribed to it. This violates React's render purity and led to the warning. Please find here

How?

Moved the registerShortcut() call into a useEffect() hook to ensure it runs after the initial render rather than during render.

Testing Instructions

  • Open the browser console panel
  • Activate Twenty Twenty-One
  • Appearance > Customize > Widgets > Options button > Keyboard shortcuts
  • Close the modal
  • Confirm that there are no warnings in the browser console

Screenshots or screencast

Screen.Recording.2025-04-17.at.2.46.24.PM.mp4

|||

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 17, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Debarghya-Banerjee <debarghyabanerjee@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets. labels Apr 17, 2025
Mamaduka
Mamaduka approved these changes Apr 17, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thanks, @Debarghya-Banerjee!

The fix makes sense. The registerShortcut method shouldn't be called during the render.

@Mamaduka Mamaduka added the props-bot Manually triggers Props Bot to ensure the list of props is up to date. label Apr 17, 2025
@github-actions github-actions bot removed the props-bot Manually triggers Props Bot to ensure the list of props is up to date. label Apr 17, 2025
@Mamaduka Mamaduka merged commit d632706 into WordPress:trunk Apr 17, 2025
68 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.8 milestone Apr 17, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@Debarghya-Banerjee @Mamaduka
@t-hamano @chriszarate
Fix: Browser Warnings when closing keyboard shortcut modal (WordPress…
0fb0697 
…#69929)

Co-authored-by: Debarghya-Banerjee <debarghyabanerjee@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Mamaduka Mamaduka Mamaduka approved these changes

Assignees

No one assigned

Labels

[Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets. [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 20.8

Development

Successfully merging this pull request may close these issues.

Customizer Widget: Browser warning error occours when closing Keyboard shortcuts modal

2 participants

@Debarghya-Banerjee @Mamaduka