Skip to content

Commit

Permalink
fix(sbb-dialog): correctly check whether pointer down event is on dia…
Browse files Browse the repository at this point in the history
…log (#2245)
  • Loading branch information
dauriamarco authored Nov 29, 2023
1 parent d0bf441 commit fcada63
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 1 deletion.
44 changes: 44 additions & 0 deletions src/components/dialog/dialog.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,50 @@ describe('sbb-dialog', () => {
expect(element).to.have.attribute('data-state', 'opened');
});

it('does not close the dialog on backdrop click if pointerdown is on dialog', async () => {
const willClose = new EventSpy(SbbDialog.events.willClose);
const didClose = new EventSpy(SbbDialog.events.didClose);

await openDialog(element);

// Simulate backdrop click
element.shadowRoot
.querySelector('.sbb-dialog')
.dispatchEvent(new CustomEvent('pointerdown', { bubbles: true, composed: true }));
element.dispatchEvent(new CustomEvent('pointerup'));
await waitForLitRender(element);

expect(willClose.count).to.be.equal(0);
await waitForLitRender(element);

expect(didClose.count).to.be.equal(0);
await waitForLitRender(element);

expect(element).to.have.attribute('data-state', 'opened');
});

it('does not close the dialog on backdrop click if pointerup is on dialog', async () => {
const willClose = new EventSpy(SbbDialog.events.willClose);
const didClose = new EventSpy(SbbDialog.events.didClose);

await openDialog(element);

// Simulate backdrop click
element.dispatchEvent(new CustomEvent('pointerdown'));
element.shadowRoot
.querySelector('.sbb-dialog')
.dispatchEvent(new CustomEvent('pointerup', { bubbles: true, composed: true }));
await waitForLitRender(element);

expect(willClose.count).to.be.equal(0);
await waitForLitRender(element);

expect(didClose.count).to.be.equal(0);
await waitForLitRender(element);

expect(element).to.have.attribute('data-state', 'opened');
});

it('closes the dialog on close button click', async () => {
const closeButton = element.shadowRoot.querySelector('[sbb-dialog-close]') as HTMLElement;
const willClose = new EventSpy(SbbDialog.events.willClose);
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialog/dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ export class SbbDialog extends LitElement {
this._isPointerDownEventOnDialog = event
.composedPath()
.filter((e): e is HTMLElement => e instanceof window.HTMLElement)
.some((target) => target.tagName === this._dialogId);
.some((target) => target.id === this._dialogId);
};

// Close dialog on backdrop click.
Expand Down

0 comments on commit fcada63

Please sign in to comment.