fix(Combobox): render the dropdown inline in the Plasmic canvas (MET-3088) by Zayooo00 · Pull Request #63 · fullstackhouse/plasmic-utils

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

Zayooo00 · 2026-08-31T12:44:19Z

Follow-up to #62.

Problem

#62 moved the Combobox menu into a portal (Headless UI v2 anchor forces portal: true). The portal renders on document.body, outside the subtree Plasmic Studio can select or scope injected styles to — so in the canvas optionsClassName and every option-state style stopped applying, and Floating UI mispositioned the menu inside the scaled canvas iframe.

Change

Gate on the existing useInPlasmic() helper:

Canvas:<ComboboxOptions portal={false} style={{ position: "absolute", top: "100%", left: 0, zIndex: 1000 }}> — the menu renders inline just below the input, fully selectable and styleable.
Prod: unchanged — 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 changed node_modules CSS can't drop it.

Verified

tsc -p tsconfig.package.json, next lint, vitest (49 pass) green. Tested locally against myevals-react-frontend in Plasmic Studio: menu renders inline under the input and optionsClassName / option-state edits now apply.

…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.

notion-workspace · 2026-08-31T12:44:26Z

Combobox: allow overriding dropdown menu width / min-width (long option labels wrap in narrow triggers)

…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.

In prod the options list is portalled to `document.body`, outside the element that carries Plasmic's design-token CSS variables (they live on `.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the menu's generated styles then resolves to nothing and the menu renders unstyled. The Plasmic canvas is unaffected because #63 renders the menu inline there. Register a `type: "themeResetClass"` prop and apply it to the portalled root (`ComboboxOptions`). Plasmic supplies the class automatically, so there is no hardcoded project id and it survives a project migration.

dosmiko7 approved these changes Aug 31, 2026
View reviewed changes

Zayooo00 enabled auto-merge (squash) August 31, 2026 12:44

Zayooo00 disabled auto-merge August 31, 2026 12:45

Zayooo00 merged commit 53c6023 into mainAug 31, 2026
2 checks passed

Zayooo00 deleted the fix/combobox-canvas-inline-menu branch August 31, 2026 12:46