Skip to content

fix(dialog): revert close event timing to dispatch immediately [BREAKING CHANGE] #5633

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.

Sign up for GitHub

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(dialog): revert close event timing to dispatch immediately [BREAKING CHANGE] #5633

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 4 additions & 28 deletions packages/dialog/src/DialogBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import '@spectrum-web-components/underlay/sp-underlay.js';
import '@spectrum-web-components/button/sp-button.js';

// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225
import '@spectrum-web-components/dialog/sp-dialog.js';
import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';
import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
import { Dialog } from './Dialog.js';
Expand Down Expand Up @@ -122,7 +121,7 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
public close(): void {
this.open = false;
}

// Dispatch close event immediately when closing is initiated
private dispatchClosed(): void {
this.dispatchEvent(
new Event('close', {
Expand Down Expand Up @@ -155,41 +154,18 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
this.handleTransitionEvent(event);
}

private get hasTransitionDuration(): boolean {
const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;

const modalTransitionDurations =
window.getComputedStyle(modal).transitionDuration;
for (const duration of modalTransitionDurations.split(','))
if (parseFloat(duration) > 0) return true;

const underlay = this.shadowRoot.querySelector(
'sp-underlay'
) as HTMLElement;

if (underlay) {
const underlayTransitionDurations =
window.getComputedStyle(underlay).transitionDuration;
for (const duration of underlayTransitionDurations.split(','))
if (parseFloat(duration) > 0) return true;
}

return false;
}

protected override update(changes: PropertyValues<this>): void {
if (changes.has('open') && changes.get('open') !== undefined) {
const hasTransitionDuration = this.hasTransitionDuration;
this.animating = true;
this.transitionPromise = new Promise((res) => {
this.resolveTransitionPromise = () => {
this.animating = false;
if (!this.open && hasTransitionDuration)
this.dispatchClosed();
res();
};
});
if (!this.open && !hasTransitionDuration) this.dispatchClosed();
if (!this.open) {
this.dispatchClosed();
}
}
super.update(changes);
}
Expand Down
Loading