makeplane / makeplane/plane

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

Open
#9,784 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.