Skip to content

fix: close calendar when outside mousedown propagation stops#6308

Open
wanxiankai wants to merge 1 commit into
Hacker0x01:mainfrom
wanxiankai:fix/outside-click-stop-propagation
Open

fix: close calendar when outside mousedown propagation stops#6308
wanxiankai wants to merge 1 commit into
Hacker0x01:mainfrom
wanxiankai:fix/outside-click-stop-propagation

Conversation

@wanxiankai

Copy link
Copy Markdown

Description

Linked issue: #6292

Problem

The calendar's document-level mousedown listener ran during the bubbling phase. Third-party controls such as react-select can stop mousedown propagation, preventing the outside-click handler from running and leaving the calendar open.

Changes

  • Register and remove the outside-click listener in the capture phase so outside presses are observed before a target stops propagation.
  • Preserve the existing target containment, ignoreClass, and listener cleanup behavior.
  • Add unit coverage for the click-outside wrapper and an integration regression test confirming that the DatePicker calendar closes.

Screenshots

Not applicable; this changes event handling without visual changes.

To reviewers

The regression is covered with an outside button whose React onMouseDown handler calls stopPropagation(). The test fails with the previous bubbling listener and passes with capture enabled.

Validation completed locally:

  • yarn prettier:check
  • yarn type-check
  • yarn lint
  • yarn test:ci --runInBand --watchman=false --silent (43 suites, 1,487 tests)
  • yarn build

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

Closes #6292

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Calendar does not close when clicking on elements that call event.stopPropagation() on mousedown (e.g., react-select)

1 participant