refactor: preserve mode when adding or removing details (#8855)

web-padawan · web-flow · commit 106c38e4edae · 2025-03-25T12:16:02.000+02:00
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout.js b/packages/master-detail-layout/src/vaadin-master-detail-layout.js
@@ -383,30 +383,27 @@ class MasterDetailLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolylitM
 
   /** @private */
   __detectLayoutMode() {
-    if (!this.hasAttribute('has-detail')) {
-      this.removeAttribute('overlay');
-      this.removeAttribute('stack');
-      return;
-    }
+    this.removeAttribute('overlay');
+    this.removeAttribute('stack');
 
     if (this.forceOverlay) {
-      this.removeAttribute('stack');
       this.setAttribute('overlay', '');
       return;
     }
 
     if (this.stackThreshold != null) {
-      this.removeAttribute('stack');
-
       const threshold = this.__getStackThresholdInPixels();
       const size = this.orientation === 'vertical' ? this.offsetHeight : this.offsetWidth;
       if (size <= threshold) {
-        this.removeAttribute('overlay');
         this.setAttribute('stack', '');
         return;
       }
     }
 
+    if (!this.hasAttribute('has-detail')) {
+      return;
+    }
+
     if (this.orientation === 'vertical') {
       this.__detectVerticalMode();
     } else {
diff --git a/packages/master-detail-layout/test/master-detail-layout.test.js b/packages/master-detail-layout/test/master-detail-layout.test.js
@@ -215,7 +215,7 @@ describe('vaadin-master-detail-layout', () => {
         expect(getComputedStyle(detail).width).to.equal('450px');
       });
 
-      it('should update stack mode when adding and removing details', async () => {
+      it('should preserve the stack mode when adding and removing details', async () => {
         layout.stackThreshold = '500px';
 
         // Start without details
@@ -226,7 +226,7 @@ describe('vaadin-master-detail-layout', () => {
         await setViewport({ width: 450, height });
         await nextResize(layout);
 
-        expect(layout.hasAttribute('stack')).to.be.false;
+        expect(layout.hasAttribute('stack')).to.be.true;
 
         // Add details
         layout.appendChild(detailContent);
@@ -238,7 +238,7 @@ describe('vaadin-master-detail-layout', () => {
         detailContent.remove();
         await nextRender();
 
-        expect(layout.hasAttribute('stack')).to.be.false;
+        expect(layout.hasAttribute('stack')).to.be.true;
       });
 
       it('should focus detail content when adding details in the stack mode', async () => {
diff --git a/packages/master-detail-layout/test/overlay-mode.test.js b/packages/master-detail-layout/test/overlay-mode.test.js
@@ -180,14 +180,14 @@ describe('overlay mode', () => {
       expect(layout.hasAttribute('overlay')).to.be.false;
     });
 
-    it('should not set the overlay mode with forceOverlay after removing details', async () => {
+    it('should preserve the overlay mode with forceOverlay after removing details', async () => {
       layout.forceOverlay = true;
       await nextRender();
 
       detailContent.remove();
       await nextRender();
 
-      expect(layout.hasAttribute('overlay')).to.be.false;
+      expect(layout.hasAttribute('overlay')).to.be.true;
 
       layout.appendChild(detailContent);
       await nextRender();
