syncing commit from monorepo. PR: 212, Title: FIO-10089: Default opened group in sidebar

.changeset/calm-steaks-march.md

@@ -0,0 +1,5 @@
+---
+"@formio/js": patch
+---
+
+change behaviour for default opened groups in sidebar

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];

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