fix(ld-sidenav): make toggle-outside work with collapse-trigger mouseout

emdgroup-liquid · Feb 14, 2023 · 226f337 · 226f337
1 parent b0479a8
commit 226f337
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-toggle-outside/ld-sidenav-toggle-outside.tsx b/src/liquid/components/ld-sidenav/ld-sidenav-toggle-outside/ld-sidenav-toggle-outside.tsx
@@ -65,7 +65,8 @@ export class LdSidenavToggleOutside implements InnerFocusable {
     this.tooltipRef.hideTooltip()
   }
 
-  private toggleSidenavCollapsedState = () => {
+  private toggleSidenavCollapsedState = (ev) => {
+    ev.stopPropagation() // prevents call of click outside handler
     this.sidenav.toggle()
   }
 

diff --git a/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts b/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts
@@ -256,7 +256,13 @@ describe('ld-sidenav', () => {
         )
       btnHeaderToggle.focus = jest.fn()
 
-      btnToggleOutside.click()
+      const ev = new MouseEvent('click', { bubbles: true, cancelable: true })
+      btnToggleOutside.dispatchEvent(ev)
+      await page.waitForChanges()
+
+      // event propagation must be stopped to prevent call of click outside handler
+      expect(ev.cancelBubble).toBeTruthy()
+
       jest.advanceTimersByTime(200)
       await page.waitForChanges()