Skip to content

[Bug]: Calendar component leaks z-index — internal sticky headers / event bars paint over any overlay without explicit z-index (incl. React Aria Modals) #180

@rms-markand-bhatt

Description

@rms-markand-bhatt

Prerequisites

  • I have searched existing issues to ensure this bug hasn't been reported already
  • I have tested this with the latest version of the components

Bug description

We've hit a z-index isolation bug that I think affects every consumer rendering Calendar next to React Aria's Modal/Overlay or any other overlay primitive that doesn't set an explicit high z-index. Reproducible in the v7 Pro Calendar source we have access to.

Steps to reproduce

Render alongside any React Aria Modal/Overlay (or any other fixed-position overlay that doesn't itself declare a z-index). Open the overlay on a mobile viewport while Calendar is in month view.
Calendar's internal elements (event indicator dots on mobile, multi-day event bars, sticky headers, time marker) paint OVER the overlay's content, while the overlay's backdrop and panel itself render correctly underneath.

Expected behavior

When any overlay (modal, slideout, popover, drawer, tooltip) opens above the calendar, every part of the calendar — event dots, multi-day bars, sticky headers, time markers, hover affordances — should be obscured by the overlay's content. The user shouldn't see calendar internals bleeding through an active dialog.

Actual behavior

Calendar's internal elements (event indicator dots on mobile, multi-day event bars, sticky headers, time marker) paint OVER the overlay's content, while the overlay's backdrop and panel itself render correctly underneath.

Code example

Browser

No response

Device type

No response

Component version

7

Environment details

No response

Screenshots/Videos

No response

Console errors

Additional context

No response

Accessibility impact

  • This bug affects keyboard navigation
  • This bug affects screen reader users
  • This bug affects focus management
  • This bug affects color contrast or visual accessibility

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions