fix: defer detect layout mode until updates are done (#9889)

* fix: defer detect layout mode until updates are done

* chore: add comment on why the calculation is deferred

* test: specify litelement in test name

Author: ugur-vaadin

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

@@ -523,8 +523,10 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
    * @protected
    */
   async _finishTransition() {
-    // Detect new layout mode after DOM has been updated
-    this.__detectLayoutMode();
+    // Detect new layout mode after DOM has been updated.
+    // The detection is wrapped in queueMicroTask in order to allow custom Lit elements to render before measurement.
+    // https://github.com/vaadin/web-components/issues/8969
+    queueMicrotask(() => this.__detectLayoutMode());
 
     if (!this.__transition) {
       return Promise.resolve();

packages/master-detail-layout/test/drawer-mode.test.js

@@ -4,6 +4,7 @@ import { fixtureSync, nextRender, nextResize } from '@vaadin/testing-helpers';
 import '../src/vaadin-master-detail-layout.js';
 import './helpers/master-content.js';
 import './helpers/detail-content.js';
+import { html, LitElement } from 'lit';
 
 window.Vaadin ||= {};
 window.Vaadin.featureFlags ||= {};
@@ -198,6 +199,35 @@ describe('drawer mode', () => {
       const input = detailContent.shadowRoot.querySelector('input');
       expect(detailContent.shadowRoot.activeElement).to.equal(input);
     });
+
+    it('should immediately switch to drawer mode when wide LitElement detail is added at narrow width', async () => {
+      layout = fixtureSync(`
+    <vaadin-master-detail-layout>
+      <div><input/></div>
+      <div slot="detail"><input/></div>
+    </vaadin-master-detail-layout>
+  `);
+      await nextRender();
+
+      await setViewport({ width: 335, height });
+      await nextResize(layout);
+
+      class CustomDetailsElement extends LitElement {
+        createRenderRoot() {
+          return this;
+        }
+
+        render() {
+          return html` <button style="width: 250px">Long button description</button> `;
+        }
+      }
+      customElements.define('custom-details-element', CustomDetailsElement);
+
+      const detail = document.createElement('custom-details-element');
+      await layout._setDetail(detail);
+
+      expect(layout.hasAttribute('drawer')).to.be.true;
+    });
   });
 
   describe('vertical', () => {

packages/master-detail-layout/test/view-transitions.test.js

@@ -211,7 +211,7 @@ describe('View transitions', () => {
       expect(updateCallbackResolved).to.be.false;
 
       // Finish transition
-      layout._finishTransition();
+      await layout._finishTransition();
       expect(detectLayoutModeSpy.calledOnce).to.be.true;
       await aTimeout(0);
       expect(updateCallbackResolved).to.be.true;