Skip to content

fix: prevent Datepicker flicker with form-adorn - #43112

Open
asxxb wants to merge 1 commit into
twbs:mainfrom
asxxb:fix/datepicker-form-adorn-flicker
Open

asxxb wants to merge 1 commit into
twbs:mainfrom
asxxb:fix/datepicker-form-adorn-flicker

Conversation

@asxxb

@asxxb asxxb commented Oct 17, 2026 •

Copy link
Copy Markdown

Description

Fix Datepicker flickering when the input is wrapped by .form-adorn.

Motivation & Context

When a Datepicker input is wrapped in .form-adorn, clicking the input can cause the calendar to briefly hide and reopen, resulting in a visible flicker.

The Datepicker uses the .form-adorn wrapper as its positioning element, while Vanilla Calendar Pro's document-level click handler treats the input as outside the calendar because it expects the clicked element to match its configured input element.

This change prevents clicks within the Datepicker's positioning element from triggering outside dismissal and removes the conflicting capture-phase click handler when the positioning element differs from the input.

Regression tests were added for input clicks, clicks inside the .form-adorn wrapper, and clicks outside the wrapper.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Fixes #43101

@asxxb
asxxb requested a review from a team as a code owner October 17, 2026 20:40
@julien-deramond julien-deramond added v6 v6, the main branch bug Something does not work as documented js JavaScript or TypeScript sources and plugins labels Oct 18, 2026

This branch has not been deployed

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

Labels

bug Something does not work as documented js JavaScript or TypeScript sources and plugins v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Datepicker flickers when wrapped by form-adorn

2 participants