fix: reset hidden state when removing panel from tabsheet (#7696) (#7703

) Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Aug 28, 2024 · 3ae3d5b · 3ae3d5b
1 parent 46d3cdb
commit 3ae3d5b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/packages/tabsheet/src/vaadin-tabsheet-mixin.js b/packages/tabsheet/src/vaadin-tabsheet-mixin.js
@@ -141,7 +141,28 @@ export const TabSheetMixin = (superClass) =>
 
       // Observe the panels slot for nodes. Set the assigned element nodes as the __panels array.
       const panelSlot = this.shadowRoot.querySelector('#panel-slot');
-      this.__panelsObserver = new SlotObserver(panelSlot, () => {
+      this.__panelsObserver = new SlotObserver(panelSlot, ({ addedNodes, removedNodes }) => {
+        if (addedNodes.length) {
+          addedNodes.forEach((node) => {
+            // Preserve custom hidden attribute to not override it.
+            if (node.nodeType === Node.ELEMENT_NODE && node.hidden) {
+              node.__customHidden = true;
+            }
+          });
+        }
+        if (removedNodes.length) {
+          removedNodes.forEach((node) => {
+            // Clear hidden attribute when removing node from the default slot,
+            // e.g. when changing its slot to `prefix` or `suffix` dynamically.
+            if (node.nodeType === Node.ELEMENT_NODE && node.hidden) {
+              if (node.__customHidden) {
+                delete node.__customHidden;
+              } else {
+                node.hidden = false;
+              }
+            }
+          });
+        }
         this.__panels = Array.from(
           panelSlot.assignedNodes({
             flatten: true,

diff --git a/packages/tabsheet/test/tabsheet.test.js b/packages/tabsheet/test/tabsheet.test.js
@@ -186,6 +186,30 @@ describe('tabsheet', () => {
 
       expect(panel.id).to.equal('custom-id');
     });
+
+    it('should reset hidden state when removing a panel', async () => {
+      const div = document.createElement('div');
+      tabsheet.appendChild(div);
+      await nextFrame();
+      expect(div.hidden).to.be.true;
+
+      div.setAttribute('slot', 'prefix');
+      await nextFrame();
+      expect(div.hidden).to.be.false;
+    });
+
+    it('should not remove explicit hidden state', async () => {
+      const div = document.createElement('div');
+      // Prefix component explicitly marked as hidden
+      div.hidden = true;
+      tabsheet.appendChild(div);
+      await nextFrame();
+
+      div.setAttribute('slot', 'prefix');
+      await nextFrame();
+
+      expect(div.hidden).to.be.true;
+    });
   });
 
   describe('loading', () => {