fix: hierarchical-view for nested custom element that has localization. (#6296)

Author: dbatiste

components/dropdown/demo/dropdown-menu-demo-view.js

@@ -0,0 +1,37 @@
+import '../../colors/colors.js';
+import '../../button/button-subtle.js';
+import { css, html, LitElement } from 'lit';
+import { HierarchicalViewMixin } from '../../hierarchical-view/hierarchical-view-mixin.js';
+import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
+
+class DemoView extends LocalizeCoreElement(HierarchicalViewMixin(LitElement)) {
+
+	static get styles() {
+		return [ super.styles,
+			css`
+				:host {
+					box-sizing: border-box;
+					color: var(--d2l-color-ferrite);
+					cursor: default;
+				}
+				.d2l-hierarchical-view-content {
+					padding: 12px;
+				}
+			`
+		];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-hierarchical-view-content">
+				<div>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+				<div>
+					<d2l-button-subtle text="${this.localize('components.pager-load-more.action')}"></d2l-button-subtle>
+				</div>
+			</div>
+		`;
+	}
+
+}
+
+customElements.define('d2l-dropdown-menu-demo-view', DemoView);

components/dropdown/demo/dropdown-menu.html

@@ -13,6 +13,7 @@
 		import '../../menu/menu-item-radio.js';
 		import '../dropdown.js';
 		import '../dropdown-menu.js';
+		import './dropdown-menu-demo-view.js';
 	</script>
 </head>
 
@@ -201,6 +202,24 @@ <h2>With Links</h2>
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Custom View</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-dropdown>
+					<button class="d2l-dropdown-opener">Open it!</button>
+					<d2l-dropdown-menu>
+						<d2l-menu label="Astronomy">
+							<d2l-menu-item text="Introduction"></d2l-menu-item>
+							<d2l-menu-item text="Searching for the Heavens">
+								<d2l-dropdown-menu-demo-view></d2l-dropdown-menu-demo-view>
+							</d2l-menu-item>
+							<d2l-menu-item text="The Solar System"></d2l-menu-item>
+						</d2l-menu>
+					</d2l-dropdown-menu>
+				</d2l-dropdown>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 </body>

components/hierarchical-view/hierarchical-view-mixin.js

@@ -1,12 +1,15 @@
 import { findComposedAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { css } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const __nativeFocus = document.createElement('div').focus;
 const escapeKeyCode = 27;
 
+const useResizeFix = getFlag('GAUD-8969-hierarchical-view-resize', true);
+
 export const HierarchicalViewMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -523,7 +526,13 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		}
 
 		if (e.detail.isSource && this.__getParentViewFromEvent(e) === this) {
-			e.detail.sourceView.__dispatchViewResize();
+			if (useResizeFix) {
+				requestAnimationFrame(() => {
+					e.detail.sourceView.__dispatchViewResize();
+				});
+			} else {
+				e.detail.sourceView.__dispatchViewResize();
+			}
 		}
 
 	}