fix: have sp-dialog-wrapper confirm scroll management of its dialog when opening

Author: Westbrook Johnson

packages/dialog/src/Dialog.ts

@@ -174,7 +174,7 @@ export class Dialog extends FocusVisiblePolyfillMixin(
         `;
     }
 
-    private shouldManageTabOrderForScrolling = (): void => {
+    public shouldManageTabOrderForScrolling = (): void => {
         const { offsetHeight, scrollHeight } = this.contentElement;
         if (offsetHeight < scrollHeight) {
             this.contentElement.tabIndex = 0;

packages/dialog/src/DialogWrapper.ts

@@ -18,6 +18,7 @@ import {
     CSSResultArray,
     query,
     ifDefined,
+    PropertyValues,
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/underlay/sp-underlay.js';
@@ -236,4 +237,12 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
             </div>
         `;
     }
+
+    protected updated(changes: PropertyValues<this>): void {
+        if (changes.has('open') && this.open) {
+            this.dialog.updateComplete.then(() => {
+                this.dialog.shouldManageTabOrderForScrolling();
+            });
+        }
+    }
 }

packages/dialog/stories/dialog-wrapper.stories.ts

@@ -96,6 +96,117 @@ export const wrapperDismissableUnderlay = (): TemplateResult => {
     `;
 };
 
+export const longContent = (): TemplateResult => {
+    return html`
+        <overlay-trigger type="modal" placement="none" open="click">
+            <sp-dialog-wrapper
+                slot="click-content"
+                headline="Dialog title"
+                dismissable
+                underlay
+                size="small"
+            >
+                <p>
+                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+                    Sed ac dolor sit amet purus malesuada congue. Donec quis
+                    nibh at felis congue commodo. Ut enim ad minima veniam, quis
+                    nostrum exercitationem ullam corporis suscipit laboriosam,
+                    nisi ut aliquid ex ea commodi consequatur? Sed ac dolor sit
+                    amet purus malesuada congue. Nam libero tempore, cum soluta
+                    nobis est eligendi optio cumque nihil impedit quo minus id
+                    quod maxime placeat facere possimus, omnis voluptas
+                    assumenda est, omnis dolor repellendus. Nullam sit amet
+                    magna in magna gravida vehicula. Itaque earum rerum hic
+                    tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+                    maiores alias consequatur aut perferendis doloribus
+                    asperiores repellat. Neque porro quisquam est, qui dolorem
+                    ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+                    quia non numquam eius modi tempora incidunt ut labore et
+                    dolore magnam aliquam quaerat voluptatem. Phasellus faucibus
+                    molestie nisl. Vestibulum fermentum tortor id mi. Integer
+                    rutrum, orci vestibulum ullamcorper ultricies, lacus quam
+                    ultricies odio, vitae placerat pede sem sit amet enim.
+                    Maecenas sollicitudin. Nullam rhoncus aliquam metus.
+                </p>
+                <p>
+                    Curabitur ligula sapien, pulvinar a vestibulum quis,
+                    facilisis vel sapien. Fusce nibh. Proin pede metus,
+                    vulputate nec, fermentum fringilla, vehicula vitae, justo.
+                    Aenean placerat. Aliquam erat volutpat. Et harum quidem
+                    rerum facilis est et expedita distinctio. Fusce nibh.
+                    Temporibus autem quibusdam et aut officiis debitis aut rerum
+                    necessitatibus saepe eveniet ut et voluptates repudiandae
+                    sint et molestiae non recusandae. Vestibulum erat nulla,
+                    ullamcorper nec, rutrum non, nonummy ac, erat. Etiam posuere
+                    lacus quis dolor. Mauris elementum mauris vitae tortor.
+                    Nulla turpis magna, cursus sit amet, suscipit a, interdum
+                    id, felis. Nam libero tempore, cum soluta nobis est eligendi
+                    optio cumque nihil impedit quo minus id quod maxime placeat
+                    facere possimus, omnis voluptas assumenda est, omnis dolor
+                    repellendus. Nulla accumsan, elit sit amet varius semper,
+                    nulla mauris mollis quam, tempor suscipit diam nulla vel
+                    leo. Pellentesque sapien.
+                </p>
+                <p>
+                    Curabitur vitae diam non enim vestibulum interdum. Sed elit
+                    dui, pellentesque a, faucibus vel, interdum nec, diam.
+                    Praesent vitae arcu tempor neque lacinia pretium. Ut tempus
+                    purus at lorem. Phasellus rhoncus. Temporibus autem
+                    quibusdam et aut officiis debitis aut rerum necessitatibus
+                    saepe eveniet ut et voluptates repudiandae sint et molestiae
+                    non recusandae. Duis ante orci, molestie vitae vehicula
+                    venenatis, tincidunt ac pede. Integer vulputate sem a nibh
+                    rutrum consequat. Aenean placerat. Cum sociis natoque
+                    penatibus et magnis dis parturient montes, nascetur
+                    ridiculus mus. Sed vel lectus. Donec odio tempus molestie,
+                    porttitor ut, iaculis quis, sem. Class aptent taciti
+                    sociosqu ad litora torquent per conubia nostra, per inceptos
+                    hymenaeos. Integer in sapien. Nullam dapibus fermentum
+                    ipsum.
+                </p>
+                <p>
+                    Integer vulputate sem a nibh rutrum consequat. Class aptent
+                    taciti sociosqu ad litora torquent per conubia nostra, per
+                    inceptos hymenaeos. Duis bibendum, lectus ut viverra
+                    rhoncus, dolor nunc faucibus libero, eget facilisis enim
+                    ipsum id lacus. Aliquam erat volutpat. Aenean id metus id
+                    velit ullamcorper pulvinar. Morbi scelerisque luctus velit.
+                    Aliquam erat volutpat. Temporibus autem quibusdam et aut
+                    officiis debitis aut rerum necessitatibus saepe eveniet ut
+                    et voluptates repudiandae sint et molestiae non recusandae.
+                    Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu,
+                    orci. Suspendisse sagittis ultrices augue. Nullam justo
+                    enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
+                    Praesent vitae arcu tempor neque lacinia pretium. Nullam
+                    faucibus mi quis velit. Maecenas aliquet accumsan leo. Morbi
+                    scelerisque luctus velit. Aliquam ornare wisi eu metus.
+                </p>
+                <p>
+                    Sed elit dui, pellentesque a, faucibus vel, interdum nec,
+                    diam. Praesent vitae arcu tempor neque lacinia pretium.
+                    Etiam dictum tincidunt diam. Et harum quidem rerum facilis
+                    est et expedita distinctio. Duis ante orci, molestie vitae
+                    vehicula venenatis, tincidunt ac pede. Integer lacinia.
+                    Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                    Mauris tincidunt sem sed arcu. Praesent in mauris eu tortor
+                    porttitor accumsan. Aenean id metus id velit ullamcorper
+                    pulvinar. Donec iaculis gravida nulla. Duis bibendum, lectus
+                    ut viverra rhoncus, dolor nunc faucibus libero, eget
+                    facilisis enim ipsum id lacus. Nulla quis diam. Quisque
+                    porta. Integer rutrum, orci vestibulum ullamcorper
+                    ultricies, lacus quam ultricies odio, vitae placerat pede
+                    sem sit amet enim. Nam sed tellus id magna elementum
+                    tincidunt. In enim a arcu imperdiet malesuada.
+                </p>
+            </sp-dialog-wrapper>
+            <sp-button slot="trigger" variant="primary">
+                Toggle Dialog
+            </sp-button>
+        </overlay-trigger>
+    `;
+};
+
 export const wrapperDismissableUnderlayError = (): TemplateResult => {
     return html`
         <div>