diff --git a/.changeset/fast-goats-approve.md b/.changeset/fast-goats-approve.md new file mode 100644 index 0000000000..29205bf3c3 --- /dev/null +++ b/.changeset/fast-goats-approve.md @@ -0,0 +1,6 @@ +--- +"@hashicorp/design-system-components": patch +--- + +Modal - Removed `close` event listener on destroy +Flyout - Removed `close` event listener on destroy diff --git a/packages/components/addon/components/hds/flyout/index.hbs b/packages/components/addon/components/hds/flyout/index.hbs index 6f67da777f..ca3c5caf25 100644 --- a/packages/components/addon/components/hds/flyout/index.hbs +++ b/packages/components/addon/components/hds/flyout/index.hbs @@ -7,6 +7,7 @@ ...attributes aria-labelledby={{this.id}} {{did-insert this.didInsert}} + {{will-destroy this.willDestroyNode}} {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}} > {{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}} diff --git a/packages/components/addon/components/hds/flyout/index.js b/packages/components/addon/components/hds/flyout/index.js index 10f2fdf64b..7a83321ed4 100644 --- a/packages/components/addon/components/hds/flyout/index.js +++ b/packages/components/addon/components/hds/flyout/index.js @@ -67,6 +67,14 @@ export default class HdsFlyoutIndexComponent extends Component { return classes.join(' '); } + @action registerOnCloseCallback() { + if (this.args.onClose && typeof this.args.onClose === 'function') { + this.args.onClose(); + } + + this.isOpen = false; + } + @action didInsert(element) { // Store references of `` and `` elements @@ -94,13 +102,7 @@ export default class HdsFlyoutIndexComponent extends Component { } // Register "onClose" callback function to be called when a native 'close' event is dispatched - this.element.addEventListener('close', () => { - if (this.args.onClose && typeof this.args.onClose === 'function') { - this.args.onClose(); - } - - this.isOpen = false; - }); + this.element.addEventListener('close', this.registerOnCloseCallback, true); // If the flyout dialog is not already open if (!this.element.open) { @@ -108,6 +110,17 @@ export default class HdsFlyoutIndexComponent extends Component { } } + @action + willDestroyNode() { + if (this.element) { + this.element.removeEventListener( + 'close', + this.registerOnCloseCallback, + true + ); + } + } + @action open() { // Make flyout dialog visible using the native `showModal` method diff --git a/packages/components/addon/components/hds/modal/index.hbs b/packages/components/addon/components/hds/modal/index.hbs index 21901c7b62..ae35473002 100644 --- a/packages/components/addon/components/hds/modal/index.hbs +++ b/packages/components/addon/components/hds/modal/index.hbs @@ -7,6 +7,7 @@ ...attributes aria-labelledby={{this.id}} {{did-insert this.didInsert}} + {{will-destroy this.willDestroyNode}} {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}} > {{yield (hash Header=(component "hds/modal/header" id=this.id onDismiss=this.onDismiss))}} diff --git a/packages/components/addon/components/hds/modal/index.js b/packages/components/addon/components/hds/modal/index.js index 89761de5ba..64840b2956 100644 --- a/packages/components/addon/components/hds/modal/index.js +++ b/packages/components/addon/components/hds/modal/index.js @@ -93,6 +93,29 @@ export default class HdsModalIndexComponent extends Component { return classes.join(' '); } + @action registerOnCloseCallback() { + if ( + !this.isDismissDisabled && + this.args.onClose && + typeof this.args.onClose === 'function' + ) { + this.args.onClose(); + } + + // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed + if (this.isDismissDisabled) { + // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail + // so we add this safeguard condition that checks for the `` to have a parent + if (this.element.parentElement) { + // As there is no way to `preventDefault` on `close` events, we call the `showModal` function + // preserving the state of the modal dialog + this.element.showModal(); + } + } else { + this.isOpen = false; + } + } + @action didInsert(element) { // Store references of `` and `` elements @@ -120,28 +143,7 @@ export default class HdsModalIndexComponent extends Component { } // Register "onClose" callback function to be called when a native 'close' event is dispatched - this.element.addEventListener('close', () => { - if ( - !this.isDismissDisabled && - this.args.onClose && - typeof this.args.onClose === 'function' - ) { - this.args.onClose(); - } - - // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed - if (this.isDismissDisabled) { - // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail - // so we add this safeguard condition that checks for the `` to have a parent - if (this.element.parentElement) { - // As there is no way to `preventDefault` on `close` events, we call the `showModal` function - // preserving the state of the modal dialog - this.element.showModal(); - } - } else { - this.isOpen = false; - } - }); + this.element.addEventListener('close', this.registerOnCloseCallback, true); // If the modal dialog is not already open if (!this.element.open) { @@ -149,6 +151,17 @@ export default class HdsModalIndexComponent extends Component { } } + @action + willDestroyNode() { + if (this.element) { + this.element.removeEventListener( + 'close', + this.registerOnCloseCallback, + true + ); + } + } + @action open() { // Make modal dialog visible using the native `showModal` method