--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
@@ -74,17 +74,18 @@ export default class Group extends Compo
     FrameMenu(
       frame,
       frameworkGroupingOn,
       { copyStackTrace, toggleFrameworkGrouping, toggleBlackBox },
       event
     );
   }
 
-  toggleFrames = () => {
+  toggleFrames = (event) => {
+    event.stopPropagation();
     this.setState(prevState => ({ expanded: !prevState.expanded }));
   };
 
   renderFrames() {
     const {
       group,
       selectFrame,
       selectedFrame,

--- a/devtools/client/webconsole/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/test/mochitest/browser.ini
@@ -288,16 +288,17 @@ subsuite = clipboard
 [browser_webconsole_context_menu_open_url.js]
 [browser_webconsole_context_menu_store_as_global.js]
 [browser_webconsole_cors_errors.js]
 [browser_webconsole_csp_ignore_reflected_xss_message.js]
 [browser_webconsole_csp_violation.js]
 [browser_webconsole_cspro.js]
 [browser_webconsole_document_focus.js]
 [browser_webconsole_duplicate_errors.js]
+[browser_webconsole_error_with_grouped_stack.js]
 [browser_webconsole_error_with_longstring_stack.js]
 [browser_webconsole_error_with_unicode.js]
 [browser_webconsole_errors_after_page_reload.js]
 [browser_webconsole_eval_in_debugger_stackframe.js]
 [browser_webconsole_eval_in_debugger_stackframe2.js]
 [browser_webconsole_execution_scope.js]
 [browser_webconsole_external_script_errors.js]
 [browser_webconsole_file_uri.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_error_with_grouped_stack.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Check if an error with a stack containing grouped frames works as expected.
+
+"use strict";
+
+const MESSAGE = "React Error";
+const TEST_URI = `data:text/html;charset=utf8,<script>
+  const x = new Error("${MESSAGE}");
+  x.stack = "a@http://exampl.com:1:1\\n" +
+    "grouped@http://react.js:1:1\\n" +
+    "grouped2@http://react.js:1:1";
+  console.error(x);
+</script>`;
+
+add_task(async function() {
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  info("Wait for the error to be logged");
+  const msgNode = await waitFor(() => findMessage(hud, MESSAGE));
+  ok(!msgNode.classList.contains("open"), `Error logged not expanded`);
+
+  const errorNode = msgNode.querySelector(".objectBox-stackTrace");
+  ok(errorNode, "The error object is logged as expected");
+
+  const onGroupExpanded = waitFor(() =>
+    errorNode.querySelector(".frames-group.expanded"));
+  errorNode.querySelector(".group").click();
+  await onGroupExpanded;
+
+  ok(true, "The stacktrace group was expanded");
+  is(errorNode.querySelectorAll(".frame").length, 3, "Expected frames are displayed");
+  ok(!msgNode.classList.contains("open"), `Error message is still not expanded`);
+});