diff --git a/src/components/sbb-dialog/sbb-dialog.tsx b/src/components/sbb-dialog/sbb-dialog.tsx index 6ead88c888..5b35e3fe25 100644 --- a/src/components/sbb-dialog/sbb-dialog.tsx +++ b/src/components/sbb-dialog/sbb-dialog.tsx @@ -208,7 +208,6 @@ export class SbbDialog implements ComponentInterface { this._setOverflowAttribute(); // Disable scrolling for content below the dialog this._scrollHandler.disableScroll(); - applyInertMechanism(this._element); } /** @@ -240,7 +239,7 @@ export class SbbDialog implements ComponentInterface { public connectedCallback(): void { this._handlerRepository.connect(); - this._state = 'closed'; + this._state = this._state || 'closed'; this._dialogController = new AbortController(); // Close dialog on backdrop click @@ -254,6 +253,10 @@ export class SbbDialog implements ComponentInterface { // TODO: Remove if possible, related to https://bugs.chromium.org/p/chromium/issues/detail?id=1493323 // For Safari we need to keep the solution which doesn't work in Chrome as it seems mutual exclusive. toggleDatasetEntry(this._element, 'isSafari', isSafari()); + + if (this._state === 'opened') { + applyInertMechanism(this._element); + } } public disconnectedCallback(): void { @@ -329,6 +332,7 @@ export class SbbDialog implements ComponentInterface { ) { this._state = 'opened'; this.didOpen.emit(); + applyInertMechanism(this._element); this._setDialogFocus(); this._focusTrap.trap(this._element); this._dialogContentResizeObserver.observe(this._dialogContentElement); @@ -340,8 +344,8 @@ export class SbbDialog implements ComponentInterface { this._state = 'closed'; this._dialogWrapperElement.querySelector('.sbb-dialog__content').scrollTo(0, 0); setModalityOnNextFocus(this._lastFocusedElement); - this._dialog.close(); removeInertMechanism(); + this._dialog.close(); // Manually focus last focused element in order to avoid showing outline in Safari this._lastFocusedElement?.focus(); this.didClose.emit({ returnValue: this._returnValue, closeTarget: this._dialogCloseElement }); diff --git a/src/components/sbb-menu/sbb-menu.tsx b/src/components/sbb-menu/sbb-menu.tsx index b478cc32d5..81534e1845 100644 --- a/src/components/sbb-menu/sbb-menu.tsx +++ b/src/components/sbb-menu/sbb-menu.tsx @@ -228,6 +228,10 @@ export class SbbMenu implements ComponentInterface { // TODO: Remove if possible, related to https://bugs.chromium.org/p/chromium/issues/detail?id=1493323 // For Safari we need to keep the solution which doesn't work in Chrome as it seems mutual exclusive. toggleDatasetEntry(this._element, 'isSafari', isSafari()); + + if (this._state === 'opened') { + applyInertMechanism(this._element); + } } public disconnectedCallback(): void { @@ -322,6 +326,7 @@ export class SbbMenu implements ComponentInterface { this._state = 'closed'; this._dialog.firstElementChild.scrollTo(0, 0); setModalityOnNextFocus(this._triggerElement); + removeInertMechanism(); this._dialog.close(); // Manually focus last focused element in order to avoid showing outline in Safari this._triggerElement?.focus({ @@ -329,7 +334,6 @@ export class SbbMenu implements ComponentInterface { preventScroll: this._triggerElement.tagName === 'SBB-HEADER-ACTION', }); this.didClose.emit(); - removeInertMechanism(); this._windowEventsController?.abort(); this._focusTrap.disconnect(); diff --git a/src/components/sbb-navigation/sbb-navigation.tsx b/src/components/sbb-navigation/sbb-navigation.tsx index 7d7cd19f4d..0d460f9fe5 100644 --- a/src/components/sbb-navigation/sbb-navigation.tsx +++ b/src/components/sbb-navigation/sbb-navigation.tsx @@ -241,11 +241,11 @@ export class SbbNavigation implements ComponentInterface { this._state = 'closed'; this._navigationContentElement.scrollTo(0, 0); setModalityOnNextFocus(this._triggerElement); + removeInertMechanism(); this._navigation.close(); // To enable focusing other element than the trigger, we need to call focus() a second time. this._triggerElement?.focus(); this.didClose.emit(); - removeInertMechanism(); this._windowEventsController?.abort(); this._focusTrap.disconnect(); @@ -351,6 +351,10 @@ export class SbbNavigation implements ComponentInterface { // TODO: Remove if possible, related to https://bugs.chromium.org/p/chromium/issues/detail?id=1493323 // For Safari we need to keep the solution which doesn't work in Chrome as it seems mutual exclusive. toggleDatasetEntry(this._element, 'isSafari', isSafari()); + + if (this._state === 'opened') { + applyInertMechanism(this._element); + } } public disconnectedCallback(): void { diff --git a/src/global/overlay/overlay.tsx b/src/global/overlay/overlay.tsx index 2ed2ae0eb0..04df2200f5 100644 --- a/src/global/overlay/overlay.tsx +++ b/src/global/overlay/overlay.tsx @@ -2,7 +2,7 @@ import { h, JSX } from '@stencil/core'; import { toggleDatasetEntry } from '../dom'; export type SbbOverlayState = 'closed' | 'opening' | 'opened' | 'closing'; -const IS_OPEN_OVERLAY_QUERY = `:is(sbb-dialog, sbb-navigation, sbb-menu, sbb-tooltip)[data-state='opened']`; +const IS_OPEN_OVERLAY_QUERY = `:is(sbb-dialog, sbb-navigation, sbb-menu)[data-state='opened']`; /** * Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete)