fix: restore dropdown positioning after Headless UI v2 upgrade - #9791
Draft
codingwolf-at wants to merge 5 commits into
Draft
fix: restore dropdown positioning after Headless UI v2 upgrade#9791codingwolf-at wants to merge 5 commits into
codingwolf-at wants to merge 5 commits into
Conversation
…ponents
- Changed popperElement state type from HTMLDivElement to HTMLElement for better compatibility.
- Set popper strategy to "fixed" in various dropdown components to enhance positioning behavior.
- Updated Combobox.Options to include modal={false} where applicable for consistent dropdown behavior.
Contributor
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueThanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
React Doctor found 23 new issues in 13 files · 23 warnings · score 77 / 100 (Needs work) · 10 fixed · vs 23 warnings
Reviewed by React Doctor for commit |
- Added className="z-30" to Popover.Panel in multiple components to improve stacking context.
- Set popper strategy to "fixed" in the Popover component for better positioning behavior.
- Updated modal={false} in Listbox.Options for consistent dropdown behavior across the application.
codingwolf-at
changed the title
- Updated the outside click detection logic in use-extended-sidebar-overview-outside-click, use-peek-overview-outside-click, and use-outside-click-detector hooks to utilize event.composedPath() for improved accuracy. - Simplified checks for elements with data attributes to enhance readability and maintainability of the code. - Removed redundant checks and streamlined the callback invocation process for better performance.
- Modified the outside click detection logic in use-extended-sidebar-overview-outside-click and use-peek-overview-outside-click hooks to check for Node type instead of HTMLElement. This change enhances compatibility with event handling and improves the accuracy of click detection.
- Removed unnecessary type casting for the popper element reference in the GptAssistantPopover component, enhancing code clarity and maintainability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Headless UI v2 (
Frozen+ defaultmodal={true}Combobox) broke dropdowns after the React 19 upgrade: menus opened at the viewport origin, option clicks did nothing, peek closed on select, and portaled date pickers sat behind peek.This keeps public Headless APIs only (no vendor patch) and:
ref/style/ attributes on the Options/Items/Panel host so FrozencloneElementcannot clobber the popper nodestrategy: "fixed"andmodal={false}on searchable / in-peek listsz-30(anddata-prevent-outside-clickwhere needed) on portaled hostscomposedPath()in peek/sidebar/outside-click hooks so a detached mousedown after Headless v2 select is not treated as an outside clickType of Change
Screenshots and Media (if applicable)
This section covers only a subset of the affected dropdowns. There are many instances across web, space, onboarding, modals, and settings, so the table below is a representative sample rather than a full inventory.
Test Scenarios
position: fixedand visible (not behind the panel).ref={setPopperElement}on a Frozen innerdiv.References
cloneElement(child, { ref })