fix(Combobox): render the dropdown inline in the Plasmic canvas (MET-3088) - #63
Merged
Merged
Conversation
…3088) Headless UI v2's `anchor` forces the options list into a portal on `document.body`. That is outside the subtree the Plasmic design tool can select or scope injected styles to, so `optionsClassName` (and every option-state style) never reached the menu in Studio, and Floating UI mispositioned it inside the scaled canvas. Gate on `useInPlasmic()`: in the canvas render `<ComboboxOptions>` with `portal: false` and an inline `position: absolute; top: 100%` so the menu sits under the input, fully selectable and styleable. In prod keep `anchor` + `transition` (portal, viewport flip/shift). Only the positioning differs between the two paths; the classes are identical.
dosmiko7
approved these changes
Aug 31, 2026
Zayooo00
enabled auto-merge (squash)
August 31, 2026 12:44
Zayooo00
disabled auto-merge
August 31, 2026 12:45
Zayooo00
added a commit
to myevaluations/myevals-plasmic-utils
that referenced
this pull request
Aug 31, 2026
…3088) (fullstackhouse#63) (#5) Headless UI v2's `anchor` forces the options list into a portal on `document.body`. That is outside the subtree the Plasmic design tool can select or scope injected styles to, so `optionsClassName` (and every option-state style) never reached the menu in Studio, and Floating UI mispositioned it inside the scaled canvas. Gate on `useInPlasmic()`: in the canvas render `<ComboboxOptions>` with `portal: false` and an inline `position: absolute; top: 100%` so the menu sits under the input, fully selectable and styleable. In prod keep `anchor` + `transition` (portal, viewport flip/shift). Only the positioning differs between the two paths; the classes are identical.
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
2 participants
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.
Follow-up to #62.
Problem
#62moved the Combobox menu into a portal (Headless UI v2anchorforcesportal: true). The portal renders ondocument.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvasoptionsClassNameand every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.Change
Gate on the existing
useInPlasmic()helper:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}>— the menu renders inline just below the input, fully selectable and styleable.anchor={{ to: menuPlacement, gap: 1, padding: 8 }}+transition(portal, viewport flip/shift).Only the positioning differs between the two paths; the
classNames are identical, so what you style in Studio is what ships.Positioning is an inline
style(not a CSS-module class) so a bundler that doesn't re-process changednode_modulesCSS can't drop it.Verified
tsc -p tsconfig.package.json,next lint,vitest(49 pass) green. Tested locally againstmyevals-react-frontendin Plasmic Studio: menu renders inline under the input andoptionsClassName/ option-state edits now apply.