Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: opening and close events no longer bubble #3278

Merged
merged 5 commits into from
Dec 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions src/elements/accordion/accordion.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 =
Expand All @@ -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 =
Expand Down Expand Up @@ -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();
Expand Down
2 changes: 2 additions & 0 deletions src/elements/accordion/accordion.ssr.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
16 changes: 12 additions & 4 deletions src/elements/accordion/accordion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
},
);
}

Expand Down
2 changes: 2 additions & 0 deletions src/elements/alert/alert-group/alert-group.ssr.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
19 changes: 14 additions & 5 deletions src/elements/alert/alert-group/alert-group.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 {
Expand Down
14 changes: 7 additions & 7 deletions src/elements/alert/alert/alert.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>`,
Expand All @@ -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>`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}),
);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}),
);

Expand All @@ -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());
}),
);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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,
);
Expand All @@ -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();
Expand All @@ -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');
Expand Down Expand Up @@ -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,
);
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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(),
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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' });
Expand Down
20 changes: 10 additions & 10 deletions src/elements/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down
2 changes: 0 additions & 2 deletions src/elements/autocomplete/autocomplete.visual.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' });
Expand Down
Loading
Loading