Skip to content

Notification centre close button does not close the popover on desktop #4261

Description

@Spark450

The close button in the notification centre panel does not close the popover on desktop. The panel stays open and the button appears dead.

Reproduce on https://design.alberta.ca/components/work-side-notification-panel/ — open the notification menu item in the live preview, then click the X in the panel header. Verified in headless Chromium at 1400x1000.

The event chain fires correctly: WorkSideNotificationPanel dispatches goa:work-side-notification-panel:closePopover, WorkSideMenuItem.handleCloseNotificationPanel receives it and dispatches goa:closePopover on document.body. The popover ignores it.

WorkSideMenuItem.svelte:217 dispatches without a target in the detail:

dispatch(document.body, "goa:closePopover", {});

Popover.svelte:274 only closes when target is truthy:

const { target } = (e as CustomEvent).detail;
if (target !== _targetEl) {
  // Don't close if the target is a child popover (descendant of this popover's content)
  if (target && !isInPopoverComposedTree(target)) {
    closePopover();
  }
}

With target undefined the guard short-circuits and closePopover() never runs. Confirmed by A/B on the live site with the popover open — dispatching goa:closePopover with detail: {} leaves the panel at 500x710, dispatching it with detail: { target: document.body } collapses it to 0x0.

The other goa:closePopover dispatchers (Popover.svelte:372, DatePicker.svelte:196) all pass a target, so this is the only caller hitting the gap.

Mobile is unaffected — handleCloseNotificationPanel calls closeMobileDrawer() directly when a drawer element exists, so it never goes through the popover path.

Test coverage gap: libs/react-components/specs/work-side-menu-with-notification-popover.browser.spec.tsx clicks the close button in the mobile drawer test (line 224) but the desktop popover test never does.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions