From 0a4847876f3d63c24c67cde23506b2c30993ff85 Mon Sep 17 00:00:00 2001
From: johnformio <johnformio@users.noreply.github.com>
Date: Tue, 8 Jul 2025 19:06:37 +0000
Subject: [PATCH] $'syncing commit from monorepo. PR: 212, Title: FIO-10089:
 Default opened group in sidebar'

---
 .changeset/calm-steaks-march.md  |  5 +++++
 src/WebformBuilder.js            | 11 +++++++++-
 test/unit/WebformBuilder.unit.js | 36 ++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/calm-steaks-march.md

diff --git a/.changeset/calm-steaks-march.md b/.changeset/calm-steaks-march.md
new file mode 100644
index 0000000000..d1b4ef79d3
--- /dev/null
+++ b/.changeset/calm-steaks-march.md
@@ -0,0 +1,5 @@
+---
+"@formio/js": patch
+---
+
+change behaviour for default opened groups in sidebar
diff --git a/src/WebformBuilder.js b/src/WebformBuilder.js
index 78cd513541..50ce3c02cc 100644
--- a/src/WebformBuilder.js
+++ b/src/WebformBuilder.js
@@ -82,7 +82,16 @@ export default class WebformBuilder extends Component {
     this.groupOrder = this.groupOrder
       .filter(group => group && !group.ignore)
       .sort((a, b) => a.weight - b.weight)
-      .map(group => group.key);
+
+    const defaultOpenedGroup = this.groupOrder.find(x => x.key !== 'basic' && x.default);
+    if (defaultOpenedGroup) {
+      this.groupOrder.forEach(x => {
+        if ('default' in x && x.key !== defaultOpenedGroup.key) {
+          x.default = false;
+        }
+      });
+    }
+    this.groupOrder = this.groupOrder.map(group => group.key);
 
     for (const type in Components.components) {
       const component = Components.components[type];
diff --git a/test/unit/WebformBuilder.unit.js b/test/unit/WebformBuilder.unit.js
index 8f635ffc55..4516bb0c46 100644
--- a/test/unit/WebformBuilder.unit.js
+++ b/test/unit/WebformBuilder.unit.js
@@ -12,6 +12,7 @@ import formWithFormController from '../forms/formWithFormController';
 import simpleWebform from '../forms/simpleWebform';
 import formWithNumericKeys from '../forms/formWithNumericKeys';
 import testUniqueApiKey from '../forms/testUniqueApiKey';
+import FormBuilder from '../../src/FormBuilder';
 
 global.requestAnimationFrame = (cb) => cb();
 global.cancelAnimationFrame = () => {};
@@ -27,6 +28,41 @@ describe('WebformBuilder tests', function() {
     done();
   });
 
+  it("Should open only one default opened group at a time", async () => {
+    const builderOptions = {
+      some_group1: {
+        title: "Components group 1",
+        weight: 10,
+        default: true,
+        components: {
+          content: true,
+        }
+      },
+      some_group2: {
+        title: "Components group 2",
+        weight: 9,
+        default: true,
+        components: {
+          captcha: true
+        }
+      }
+    }
+    const builder = new FormBuilder(document.createElement('div'), { display: 'form', components: [] }, { builder: builderOptions });
+    await builder.ready;
+    const sidebarContainer = builder.element.querySelector('[ref="sidebar-groups"]');
+    const groupsCollapse = [...sidebarContainer.querySelectorAll('[ref="sidebar-group"]')];
+    // Should be opened only one group with default = true. As we get sort ascending (by weight field) the "Components group 2" will be visible
+    groupsCollapse.forEach(x => {
+      const id = x.getAttribute("id");
+      if (id.includes("some_group2")) {
+        assert.equal(x.classList.contains('show'), true);
+      }
+      else {
+        assert.equal(x.classList.contains('show'), false);
+      }
+    })
+  });
+
   it("Should not show errors with default array values", (done) => {
     const builder = Harness.getBuilder();
     builder