MWPW-158911: Unable to scroll page if the filters modal closed by cli…

…ck outside of the modal (#2933) fixed scrolling after click outside
adobecom · Oct 21, 2024 · 876a0a8 · 876a0a8
1 parent e5b7867
commit 876a0a8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/libs/deps/mas/merch-sidenav.js b/libs/deps/mas/merch-sidenav.js
@@ -138,4 +138,4 @@ import{html as k,css as H,LitElement as P}from"/libs/deps/lit-all.min.js";var r=
         `}get asAside(){return k`<sp-theme theme="spectrum" color="light" scale="medium"
             ><h2>${this.sidenavTitle}</h2>
             <slot></slot
-        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(e){e.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{w(this.dialog),document.body.classList.add("merch-modal");let e={trigger:this.#e,notImmediatelyClosable:!0,type:"auto"},t=await window.__merch__spectrum_Overlay.open(this.dialog,e);t.addEventListener("close",()=>{this.modal=!1,_(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(t)})}updated(){this.modal&&this.openModal()}showModal({target:e}){this.#e=e,this.modal=!0}};customElements.define("merch-sidenav",f);export{f as MerchSideNav};
+        ></sp-theme>`}get dialog(){return this.shadowRoot.querySelector("sp-dialog-base")}closeModal(e){e.preventDefault(),this.dialog?.close(),document.body.classList.remove("merch-modal")}openModal(){this.updateComplete.then(async()=>{w(this.dialog),document.body.classList.add("merch-modal");let e={trigger:this.#e,notImmediatelyClosable:!0,type:"auto"},t=await window.__merch__spectrum_Overlay.open(this.dialog,e);t.addEventListener("close",()=>{this.modal=!1,document.body.classList.remove("merch-modal"),_(this.dialog)}),this.shadowRoot.querySelector("sp-theme").append(t)})}updated(){this.modal&&this.openModal()}showModal({target:e}){this.#e=e,this.modal=!0}};customElements.define("merch-sidenav",f);export{f as MerchSideNav};
diff --git a/libs/features/mas/web-components/src/sidenav/merch-sidenav.js b/libs/features/mas/web-components/src/sidenav/merch-sidenav.js
@@ -148,6 +148,7 @@ export class MerchSideNav extends LitElement {
             );
             overlay.addEventListener('close', () => {
                 this.modal = false;
+                document.body.classList.remove('merch-modal');
                 enableBodyScroll(this.dialog);
             });
             this.shadowRoot.querySelector('sp-theme').append(overlay);

diff --git a/libs/features/mas/web-components/test/merch-card-collection.test.html.js b/libs/features/mas/web-components/test/merch-card-collection.test.html.js
@@ -89,18 +89,30 @@ runTests(async () => {
               merchCards.shadowRoot.querySelector('#filtersButton').click();
               await delay(100);
               expect(document.body.classList.contains('merch-modal')).to.be.true;
+              document.querySelector('merch-sidenav').removeAttribute('modal');
+              document.body.classList.remove('merch-modal');
           });
 
-          it('removes the class for modal when closing the filters modal', async () => {
+          it('removes the class for modal when closing the filters modal by clicking the "Close" button', async () => {
+              render();
+              await delay(100);
+              merchCards.shadowRoot.querySelector('#filtersButton').click();
+              await delay(100);
+              document.querySelector('merch-sidenav').shadowRoot.querySelector('#sidenav').querySelector('sp-link').click();
+              expect(document.body.classList.contains('merch-modal')).to.be.false;
+              document.querySelector('merch-sidenav').removeAttribute('modal');
+          });
+
+          it('removes the class for modal when closing the filters modal by clicking outside the modal', async () => {
             render();
             await delay(100);
             merchCards.shadowRoot.querySelector('#filtersButton').click();
             await delay(100);
-            expect(document.body.classList.contains('merch-modal')).to.be.true;
-            document.querySelector('merch-sidenav').shadowRoot.querySelector('#sidenav').querySelector('sp-link').click();
+            document.querySelector('merch-sidenav').shadowRoot.querySelector('sp-overlay').dispatchEvent(new CustomEvent('close'));
             await delay(100);
             expect(document.body.classList.contains('merch-modal')).to.be.false;
-        });
+            document.querySelector('merch-sidenav').removeAttribute('modal');
+          });
       });
 
       describe('merch-card-collection web component on desktop', () => {