fix: Dialog sizing logic wait for descendants to update (#5306)

* add additional resizing logic to dialog-mixin so it wait for descendants lifecycle updates before resize
* add ff conditional to guard behavior

Author: KearseTrevor

components/dialog/demo/dialog-async-content.js

@@ -3,8 +3,9 @@ import '../../list/list-item.js';
 import '../../list/list-item-content.js';
 import { html, LitElement } from 'lit';
 import { InitialStateError, runAsync } from '../../../directives/run-async/run-async.js';
+import { LoadingCompleteMixin } from '../../../mixins/loading-complete/loading-complete-mixin.js';
 
-class DialogAsyncContent extends LitElement {
+class DialogAsyncContent extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -32,21 +33,21 @@ class DialogAsyncContent extends LitElement {
 				resolve(html`
 					<d2l-list>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Introductory Earth Sciences</div>
 								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Engineering Materials for Energy Systems</div>
 								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Geomorphology and GIS </div>
 								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
@@ -58,6 +59,14 @@ class DialogAsyncContent extends LitElement {
 		});
 	}
 
+	#handleImageLoad() {
+		const images = this.shadowRoot.querySelectorAll('img');
+		for (const image of images) {
+			if (!image.complete) return;
+		}
+		this.resolveLoadingComplete();
+	}
+
 }
 
 customElements.define('d2l-dialog-demo-async-content', DialogAsyncContent);

components/dialog/dialog-mixin.js

@@ -2,7 +2,7 @@ import '../focus-trap/focus-trap.js';
 import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { findComposedAncestor, getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, getFirstFocusableDescendant, getNextFocusable, isFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -11,6 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
+import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
 window.D2L = window.D2L || {};
 window.D2L.DialogMixin = window.D2L.DialogMixin || {};
@@ -452,6 +453,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (reduceMotion) await new Promise(resolve => requestAnimationFrame(resolve));
 			else await animPromise;
 
+			const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-7397-dialog-resize-updateComplete', true) ?? true;
+			if (flag) {
+				await this.#waitForUpdateComplete();
+			}
+			await this._updateSize();
 			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
@@ -580,4 +586,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			});
 		});
 	}
+
+	async #waitForUpdateComplete() {
+		const predicate = () => true;
+		const composedChildren = getComposedChildren(this, predicate);
+		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
+	}
 };

components/dialog/test/golden/dialog-mixin/chromium/custom-delayed-content.png

@@ -86,7 +86,8 @@ elemIdListRemoves(node, attrName, value);
 findComposedAncestor(node, predicate);
 
 // gets the composed children (including shadow children & distributed children)
-getComposedChildren(element);
+// includes a predicate which will add children nodes when predicate(node) is true
+getComposedChildren(element, predicate = () => true);
 
 // gets the composed parent (including shadow host & insertion points)
 getComposedParent(node);

helpers/README.md

@@ -79,7 +79,7 @@ export function getBoundingAncestor(node) {
 	});
 }
 
-export function getComposedChildren(node) {
+export function getComposedChildren(node, predicate = () => true) {
 
 	if (!node) {
 		return null;
@@ -104,7 +104,9 @@ export function getComposedChildren(node) {
 
 	for (let i = 0; i < nodes.length; i++) {
 		if (nodes[i].nodeType === 1) {
-			children.push(nodes[i]);
+			if (predicate(nodes[i])) {
+				children.push(nodes[i]);
+			}
 		}
 	}
 

helpers/dom.js

@@ -0,0 +1,25 @@
+import { getComposedChildren } from '../dom.js';
+
+export async function waitForElem(elem, predicate = () => true) {
+
+	if (!elem) return;
+
+	const update = elem.updateComplete;
+	if (typeof update === 'object' && Promise.resolve(update) === update) {
+		await update;
+		await new Promise(resolve => {
+			requestAnimationFrame(() => resolve());
+		});
+	}
+
+	if (typeof elem.getLoadingComplete === 'function') {
+		await elem.getLoadingComplete();
+		await new Promise(resolve => {
+			requestAnimationFrame(() => resolve());
+		});
+	}
+
+	const children = getComposedChildren(elem, predicate);
+	await Promise.all(children.map(e => waitForElem(e, predicate)));
+
+}