fix: display master content only after layout calculated sizes (#11464)

Author: vursen

packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js

@@ -69,6 +69,13 @@ export const masterDetailLayoutStyles = css`
   #master {
     grid-column: master-start / detail-start;
     grid-row: 1;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([has-master]) #master {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   :is(#detail, #detail-placeholder, #outgoing) {

packages/master-detail-layout/src/vaadin-master-detail-layout.js

@@ -344,9 +344,11 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   __readLayoutState() {
     const isVertical = this.orientation === 'vertical';
 
+    const masterContent = this.querySelector(':scope > :is([slot=""], :not([slot]))');
     const detailContent = this.querySelector(':scope > [slot="detail"]');
     const detailPlaceholder = this.querySelector(':scope > [slot="detail-placeholder"]');
 
+    const hasMaster = !!masterContent;
     const hadDetail = this.hasAttribute('has-detail');
     const hasDetail = detailContent != null && detailContent.checkVisibility();
     const hasDetailPlaceholder = !!detailPlaceholder;
@@ -362,6 +364,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     const focusTarget = !hadDetail && hasDetail && hasOverflow ? getFocusableElements(detailContent)[0] : null;
 
     return {
+      hasMaster,
       hadDetail,
       hasDetail,
       hasDetailPlaceholder,
@@ -376,7 +379,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * Applies layout state to DOM attributes. Pure writes, no reads.
    * @private
    */
-  __writeLayoutState({ hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget, trackSizes }) {
+  __writeLayoutState({ hasMaster, hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget, trackSizes }) {
     const [_masterSize, _masterExtra, detailSize] = trackSizes;
 
     // If no detailSize is explicitily set, cache the intrinsic size (min-content) of
@@ -398,6 +401,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
 
     this.toggleAttribute('overlay', hasOverflow);
+    this.toggleAttribute('has-master', hasMaster);
     this.toggleAttribute('has-detail', hasDetail);
     this.toggleAttribute('has-detail-placeholder', hasDetailPlaceholder);
 

packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js

@@ -4,6 +4,7 @@ export const snapshots = {};
 snapshots["vaadin-master-detail-layout host default"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   orientation="horizontal"
   overlay-containment="layout"
 >
@@ -17,6 +18,7 @@ snapshots["vaadin-master-detail-layout host default"] =
 snapshots["vaadin-master-detail-layout host masterSize"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   orientation="horizontal"
   overlay-containment="layout"
   style="--_master-size: 300px;"
@@ -31,6 +33,7 @@ snapshots["vaadin-master-detail-layout host masterSize"] =
 snapshots["vaadin-master-detail-layout host detailSize"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   orientation="horizontal"
   overlay-containment="layout"
   style="--_detail-size: 400px;"
@@ -45,6 +48,7 @@ snapshots["vaadin-master-detail-layout host detailSize"] =
 snapshots["vaadin-master-detail-layout host masterSize and detailSize"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   orientation="horizontal"
   overlay-containment="layout"
   style="--_master-size: 300px; --_detail-size: 400px;"
@@ -98,6 +102,7 @@ snapshots["vaadin-master-detail-layout detail default"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail=""
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -117,6 +122,7 @@ snapshots["vaadin-master-detail-layout detail overflow"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail=""
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -135,6 +141,7 @@ snapshots["vaadin-master-detail-layout detail overflow"] =
 snapshots["vaadin-master-detail-layout detail hidden"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -156,6 +163,7 @@ snapshots["vaadin-master-detail-layout detail hidden"] =
 snapshots["vaadin-master-detail-layout detail removed"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -172,6 +180,7 @@ snapshots["vaadin-master-detail-layout detail placeholder default"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail-placeholder=""
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -191,6 +200,7 @@ snapshots["vaadin-master-detail-layout detail placeholder overflow"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail-placeholder=""
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
@@ -209,6 +219,7 @@ snapshots["vaadin-master-detail-layout detail placeholder overflow"] =
 snapshots["vaadin-master-detail-layout detail placeholder removed"] = 
 `<vaadin-master-detail-layout
   expand="master"
+  has-master=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"