diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts index 6befd575f4..21365e88c2 100644 --- a/packages/dialog/src/Dialog.ts +++ b/packages/dialog/src/Dialog.ts @@ -250,6 +250,10 @@ export class Dialog extends FocusVisiblePolyfillMixin( protected onContentSlotChange({ target, }: Event & { target: HTMLSlotElement }): void { + requestAnimationFrame(() => { + // Content must be available _AND_ styles must be applied. + this.shouldManageTabOrderForScrolling(); + }); if (this.conditionDescribedby) { this.conditionDescribedby(); delete this.conditionDescribedby; diff --git a/packages/dialog/stories/dialog.stories.ts b/packages/dialog/stories/dialog.stories.ts index 70a4b11d22..a6932bea58 100644 --- a/packages/dialog/stories/dialog.stories.ts +++ b/packages/dialog/stories/dialog.stories.ts @@ -493,3 +493,44 @@ export const fullscreenTakeover = (): TemplateResult => { `; }; + +export const forcedScrolling = (): TemplateResult => html` + +
+ +

Disclaimer

+
+ The contents of this dialog is specifically prepared to force + scrolling, allowing us to test whether the scroll bar is + appopriately activated in this context. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Auctor augue mauris augue neque gravida. Libero + volutpat sed ornare arcu. Quisque egestas diam in arcu + cursus euismod quis viverra. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Auctor augue mauris augue neque gravida. Libero + volutpat sed ornare arcu. Quisque egestas diam in arcu + cursus euismod quis viverra. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Auctor augue mauris augue neque gravida. Libero + volutpat sed ornare arcu. Quisque egestas diam in arcu + cursus euismod quis viverra. + +
+ Footer button +
+
+`;