fix(Combobox): let the menu drop shadow render in prod (MET-3088) - #65
Merged
Conversation
Zayooo00
force-pushed
the
fix/combobox-menu-shadow-clip
branch
from
September 1, 2026 07:42
b9f4812 to
f9bfe4e
Compare
Zayooo00
changed the title
Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.
Zayooo00
force-pushed
the
fix/combobox-menu-shadow-clip
branch
from
September 1, 2026 07:44
f9bfe4e to
d76ba70
Compare
Zayooo00
changed the title
dosmiko7
approved these changes
Sep 1, 2026
Zayooo00
added a commit
to myevaluations/myevals-plasmic-utils
that referenced
this pull request
Sep 1, 2026
…llstackhouse#65) (#7) Two things were clipping the box shadow (set via `optionsClassName`, `0 4px 48px`) on the deployed menu: - `.options` had `clip-path: inset(0 -48px -48px -48px)` - a leftover from when the menu was an absolutely positioned sibling right below the input and its shadow could bleed up over it. Moved into the canvas-only branch (inline), where the menu is still inline and flush under the input; in prod (portalled + gapped) the clip is gone. - Headless UI's Floating UI `size` middleware stamps `overflow: auto` inline on `.positioner` (the portal root), whose scroll box clips the inner `.options` shadow. Override it back to `overflow: visible`; the inner `.options` keeps its own `max-height` + `overflow-y` so long lists still scroll. Canvas behaviour unchanged.
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–#64. On the deployed app the Combobox menu rendered with no drop shadow even though one is set via
optionsClassName(0 4px 48px #00000080). Two things clipped it:1.
.optionsclip-path: inset(0 -48px -48px -48px)— a leftover from when the menu was an absolutely-positioned sibling right below the input, to stop its shadow bleeding up over the input. It cut the shadow off flush at the top and to nothing on the other sides. Moved into the canvas-only branch (inlineclipPath), where the menu is still inline + flush under the input and the clip is still wanted. In prod (portalled + gapped) it's gone.2.
overflow: autoon.positioner— Headless UI's Floating UIsizemiddleware stampsoverflow: auto+max-width/max-heightinline on the portal root every reposition. That scroll box clips the inner.optionsshadow. Overridden back tooverflow: visible !important; the inner.optionskeeps its ownmax-height: 494px+overflow-y: autoso long lists still scroll.Canvas behaviour unchanged.
next lint,tsc,vitest(49) green.