From 3ae3d5b358c2283d8fc500a999d52d3ea251b67b Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:51:26 +0200
Subject: [PATCH] fix: reset hidden state when removing panel from tabsheet
 (#7696) (#7703)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 .../tabsheet/src/vaadin-tabsheet-mixin.js     | 23 +++++++++++++++++-
 packages/tabsheet/test/tabsheet.test.js       | 24 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/tabsheet/src/vaadin-tabsheet-mixin.js b/packages/tabsheet/src/vaadin-tabsheet-mixin.js
index f3d31f90fd..22b9d48ccd 100644
--- 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
index a5bb81b69e..6615b8df96 100644
--- 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', () => {