fix: opening and close events no longer bubble (#3278)

Closes #3273 BREAKING CHANGE: `willOpen`, `didOpen`, `willClose`, `didClose`, `willStick`, `didStick`, `willUnstick` and `didUnstick` events no longer bubble.
sbb-design-systems · Dec 10, 2024 · eabc4ca · eabc4ca
1 parent 02f24f8
commit eabc4ca
Show file tree

Hide file tree

Showing 39 changed files with 419 additions and 312 deletions.
diff --git a/src/elements/accordion/accordion.spec.ts b/src/elements/accordion/accordion.spec.ts
@@ -1,4 +1,4 @@
-import { assert, expect } from '@open-wc/testing';
+import { assert, aTimeout, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture } from '../core/testing/private.js';
@@ -120,7 +120,9 @@ describe(`sbb-accordion`, () => {
   });
 
   it('should close others when expanding and multi = false', async () => {
-    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
+    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, null, {
+      capture: true,
+    });
     const panelOne: SbbExpansionPanelElement =
       element.querySelector<SbbExpansionPanelElement>('#panel-1')!;
     const headerOne: SbbExpansionPanelHeaderElement =
@@ -140,30 +142,35 @@ describe(`sbb-accordion`, () => {
 
     headerTwo.click();
     await willOpenEventSpy.calledOnce();
+    await aTimeout(0);
     expect(willOpenEventSpy.count).to.be.equal(1);
-    expect(panelOne.expanded).to.be.equal(false);
-    expect(panelTwo.expanded).to.be.equal(true);
-    expect(panelThree.expanded).to.be.equal(false);
+    expect(panelOne.expanded, 'headerTwo panelOne.expanded').to.be.equal(false);
+    expect(panelTwo.expanded, 'headerTwo panelTwo.expanded').to.be.equal(true);
+    expect(panelThree.expanded, 'headerTwo panelThree.expanded').to.be.equal(false);
 
     headerOne.click();
     await willOpenEventSpy.calledTimes(2);
+    await aTimeout(0);
     expect(willOpenEventSpy.count).to.be.equal(2);
-    expect(panelOne.expanded).to.be.equal(true);
-    expect(panelTwo.expanded).to.be.equal(false);
-    expect(panelThree.expanded).to.be.equal(false);
+    expect(panelOne.expanded, 'headerOne panelOne.expanded').to.be.equal(true);
+    expect(panelTwo.expanded, 'headerOne panelTwo.expanded').to.be.equal(false);
+    expect(panelThree.expanded, 'headerOne panelThree.expanded').to.be.equal(false);
 
     headerThree.click();
     await willOpenEventSpy.calledTimes(3);
+    await aTimeout(0);
     expect(willOpenEventSpy.count).to.be.equal(3);
-    expect(panelOne.expanded).to.be.equal(false);
-    expect(panelTwo.expanded).to.be.equal(false);
-    expect(panelThree.expanded).to.be.equal(true);
+    expect(panelOne.expanded, 'headerThree panelOne.expanded').to.be.equal(false);
+    expect(panelTwo.expanded, 'headerThree panelTwo.expanded').to.be.equal(false);
+    expect(panelThree.expanded, 'headerThree panelThree.expanded').to.be.equal(true);
   });
 
   it('should not change others when expanding and multi = false', async () => {
     element.multi = true;
     await waitForLitRender(element);
-    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
+    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, null, {
+      capture: true,
+    });
     const panelOne: SbbExpansionPanelElement =
       element.querySelector<SbbExpansionPanelElement>('#panel-1')!;
     const headerOne: SbbExpansionPanelHeaderElement =
@@ -221,7 +228,9 @@ describe(`sbb-accordion`, () => {
       expect(panel.expanded).to.be.equal(false);
     }
 
-    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
+    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, null, {
+      capture: true,
+    });
 
     headerTwo.click();
     await willOpenEventSpy.calledOnce();

diff --git a/src/elements/accordion/accordion.ssr.spec.ts b/src/elements/accordion/accordion.ssr.spec.ts
@@ -5,6 +5,8 @@ import { ssrHydratedFixture } from '../core/testing/private.js';
 
 import { SbbAccordionElement } from './accordion.js';
 
+import '../expansion-panel.js';
+
 describe(`sbb-accordion ssr`, () => {
   let root: SbbAccordionElement;
 

diff --git a/src/elements/accordion/accordion.ts b/src/elements/accordion/accordion.ts
@@ -5,8 +5,9 @@ import { customElement, property } from 'lit/decorators.js';
 import { SbbConnectedAbortController } from '../core/controllers.js';
 import { forceType, handleDistinctChange } from '../core/decorators.js';
 import { isLean } from '../core/dom.js';
+import { isEventPrevented } from '../core/eventing.js';
 import { SbbHydrationMixin } from '../core/mixins.js';
-import { SbbExpansionPanelElement } from '../expansion-panel.js';
+import type { SbbExpansionPanelElement } from '../expansion-panel.js';
 import type { SbbTitleLevel } from '../title.js';
 
 import style from './accordion.scss?lit&inline';
@@ -48,9 +49,16 @@ class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener(
-      SbbExpansionPanelElement.events.willOpen,
-      (e: CustomEvent<void>) => this._closePanels(e),
-      { signal },
+      'willOpen',
+      async (e: CustomEvent<void>) => {
+        if (!(await isEventPrevented(e))) {
+          this._closePanels(e);
+        }
+      },
+      {
+        signal,
+        capture: true,
+      },
     );
   }
 

diff --git a/src/elements/alert/alert-group/alert-group.ssr.spec.ts b/src/elements/alert/alert-group/alert-group.ssr.spec.ts
@@ -5,6 +5,8 @@ import { ssrHydratedFixture } from '../../core/testing/private.js';
 
 import { SbbAlertGroupElement } from './alert-group.js';
 
+import '../alert/alert.js';
+
 describe(`sbb-alert-group ssr`, () => {
   let root: SbbAlertGroupElement;
 

diff --git a/src/elements/alert/alert-group/alert-group.ts b/src/elements/alert/alert-group/alert-group.ts
@@ -5,10 +5,10 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { SbbConnectedAbortController } from '../../core/controllers.js';
 import { forceType } from '../../core/decorators.js';
-import { EventEmitter } from '../../core/eventing.js';
+import { EventEmitter, isEventPrevented } from '../../core/eventing.js';
 import { SbbHydrationMixin } from '../../core/mixins.js';
 import type { SbbTitleLevel } from '../../title.js';
-import { SbbAlertElement } from '../alert.js';
+import type { SbbAlertElement } from '../alert.js';
 
 import style from './alert-group.scss?lit&inline';
 
@@ -56,9 +56,18 @@ class SbbAlertGroupElement extends SbbHydrationMixin(LitElement) {
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
-    this.addEventListener(SbbAlertElement.events.didClose, (e) => this._alertClosed(e), {
-      signal,
-    });
+    this.addEventListener(
+      'didClose',
+      async (e: CustomEvent<void>) => {
+        if (!(await isEventPrevented(e))) {
+          this._alertClosed(e);
+        }
+      },
+      {
+        signal,
+        capture: true,
+      },
+    );
   }
 
   private _alertClosed(event: Event): void {

diff --git a/src/elements/alert/alert/alert.spec.ts b/src/elements/alert/alert/alert.spec.ts
@@ -15,10 +15,10 @@ describe(`sbb-alert`, () => {
   });
 
   it('should fire animation events', async () => {
-    const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen);
-    const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen);
-    const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose);
-    const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose);
+    const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen, null, { capture: true });
+    const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen, null, { capture: true });
+    const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose, null, { capture: true });
+    const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose, null, { capture: true });
 
     const alert: SbbAlertElement = await fixture(
       html`<sbb-alert title-content="disruption">Interruption</sbb-alert>`,
@@ -37,9 +37,9 @@ describe(`sbb-alert`, () => {
   });
 
   it('should respect canceled willClose event', async () => {
-    const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen);
-    const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose);
-    const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose);
+    const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen, null, { capture: true });
+    const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose, null, { capture: true });
+    const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose, null, { capture: true });
 
     const alert: SbbAlertElement = await fixture(
       html`<sbb-alert title-content="disruption">Interruption</sbb-alert>`,

diff --git a/...ts/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts b/...ts/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
@@ -96,9 +96,7 @@ describe(`sbb-autocomplete-grid-optgroup`, () => {
         visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '800px' });
-          setup.withPostSetupAction(() =>
-            setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(),
-          );
+          setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus());
         }),
       );
     });

diff --git a/...ements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts b/...ements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
@@ -92,9 +92,7 @@ describe(`sbb-autocomplete-grid-option`, () => {
         visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '400px' });
-          setup.withPostSetupAction(() =>
-            setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(),
-          );
+          setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus());
         }),
       );
 
@@ -104,9 +102,7 @@ describe(`sbb-autocomplete-grid-option`, () => {
           await setup.withFixture(autocompleteTemplate({ ...defaultArgs, disabled: true }), {
             minHeight: '400px',
           });
-          setup.withPostSetupAction(() =>
-            setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(),
-          );
+          setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus());
         }),
       );
     });

diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -94,10 +94,10 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('opens and closes with mouse and keyboard', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
-    const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose);
-    const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
+    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen, element);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
+    const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose, element);
+    const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose, element);
 
     input.click();
     await willOpenEventSpy.calledOnce();
@@ -146,7 +146,7 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('select by mouse', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
     const optionSelectedEventSpy = new EventSpy(
       SbbAutocompleteGridOptionElement.events.optionSelected,
     );
@@ -170,8 +170,8 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('select button and get related option', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen, element);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
     const clickSpy = new EventSpy('click');
 
     input.focus();
@@ -195,7 +195,7 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('keyboard navigation', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
     const optOne = element.querySelector('#option-1');
     const buttonOne = element.querySelector('#button-1');
     const optTwo = element.querySelector('#option-2');
@@ -239,8 +239,8 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('opens and select with keyboard', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
-    const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
+    const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose, element);
     const optionSelectedEventSpy = new EventSpy(
       SbbAutocompleteGridOptionElement.events.optionSelected,
     );
@@ -275,7 +275,7 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('opens and select button with keyboard', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
     const clickSpy = new EventSpy('click');
     const optOne = element.querySelector('#option-1');
     const buttonOne = element.querySelector('#button-1');
@@ -342,7 +342,7 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('does not open if prevented', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
+    const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen, element);
 
     element.addEventListener(SbbAutocompleteGridElement.events.willOpen, (ev) =>
       ev.preventDefault(),
@@ -357,8 +357,8 @@ describe(`sbb-autocomplete-grid`, () => {
   });
 
   it('does not close if prevented', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
-    const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element);
+    const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose, element);
 
     element.open();
     await didOpenEventSpy.calledOnce();

diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
@@ -151,8 +151,6 @@ describe('sbb-autocomplete-grid', () => {
   `;
 
   const openAutocomplete = async (setup: VisualDiffSetupBuilder): Promise<void> => {
-    const ac = setup.snapshotElement.querySelector('sbb-autocomplete-grid')!;
-    ac.open();
     const input = setup.snapshotElement.querySelector('input')!;
     input.focus();
     await sendKeys({ press: 'O' });

diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts
@@ -64,10 +64,10 @@ describe(`sbb-autocomplete`, () => {
   });
 
   it('opens and closes with mouse and keyboard', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen);
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen);
-    const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose);
-    const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose);
+    const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen, element);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element);
+    const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose, element);
+    const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose, element);
 
     input.click();
     await willOpenEventSpy.calledOnce();
@@ -116,7 +116,7 @@ describe(`sbb-autocomplete`, () => {
   });
 
   it('select by mouse', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element);
     const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected);
     const inputEventSpy = new EventSpy('input', input);
     const changeEventSpy = new EventSpy('change', input);
@@ -143,8 +143,8 @@ describe(`sbb-autocomplete`, () => {
   });
 
   it('opens and select with keyboard', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen);
-    const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element);
+    const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose, element);
     const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected);
     const inputEventSpy = new EventSpy('input', input);
     const changeEventSpy = new EventSpy('change', input);
@@ -213,7 +213,7 @@ describe(`sbb-autocomplete`, () => {
   });
 
   it('does not open if prevented', async () => {
-    const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen);
+    const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen, element);
 
     element.addEventListener(SbbAutocompleteElement.events.willOpen, (ev) => ev.preventDefault());
     element.open();
@@ -226,8 +226,8 @@ describe(`sbb-autocomplete`, () => {
   });
 
   it('does not close if prevented', async () => {
-    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen);
-    const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose);
+    const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element);
+    const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose, element);
 
     element.open();
     await didOpenEventSpy.calledOnce();

diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts
@@ -110,8 +110,6 @@ describe('sbb-autocomplete', () => {
   `;
 
   const openAutocomplete = async (setup: VisualDiffSetupBuilder): Promise<void> => {
-    const ac = setup.snapshotElement.querySelector('sbb-autocomplete')!;
-    ac.open();
     const input = setup.snapshotElement.querySelector('input')!;
     input.focus();
     await sendKeys({ press: 'O' });