🐛 Bug: date picker month/year dropdowns inoperable on macOS (native select window blur closes the popover)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 59.6k
- Forks
- 5.8k
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 49
Description
- 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).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the date picker using captionLayout="dropdown" and inspect react-day-picker's components.Dropdown override. Verify the behavior in Storybook with a real browser: month/year menus should open and select correctly, update the calendar grid, remain open on macOS, and close properly on outside click or Escape.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100