Skip to content

🐛 Bug: date picker month/year dropdowns inoperable on macOS (native select window blur closes the popover) #9784

Description

@Liewzheng
  • I have searched the existing issues

Summary

In the date picker (e.g. work item start/due date) with captionLayout="dropdown", the month/year selectors are native <select> elements. On macOS Chrome, clicking one opens an OS-level dropdown window → the browser window blurs → the surrounding Headless UI Combobox.Options treats it as an outside interaction and instantly closes the whole calendar popover. The selection never lands — the dropdowns look completely inoperable.

Why should this be worked on?

Setting start/due dates is a core workflow; the month/year dropdowns are the only fast way to jump across months (the nav arrows only step one month at a time). On macOS the feature is effectively broken.

Replacing the native <select> with a custom, portal-rendered listbox dropdown (react-day-picker's components.Dropdown override) removes the OS-level popup entirely, so no window blur occurs and the calendar popover stays open. Also fixes the dropdown being clipped by overflow-hidden popover containers.

Working implementation in the linked PR (verified in Storybook with a real browser: month/year menus open, select correctly, calendar grid updates; outside-click/Escape close properly).

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

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    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