Repository navigation
SelectV2 dropdown fails to open after selecting an item (Kobalte Portal rendering bug) #38621
Description
Description
Description
After selecting an option from a SelectV2 dropdown (language, theme, color scheme, shell), the next click on the trigger does not render the dropdown popover. The trigger's onClick fires, onOpenChange(true) fires, but the <Kobalte.Content> / <Kobalte.Listbox> never appears in the DOM. Re-clicking eventually recovers but only after several attempts.
Also reproducible on the official desktop .exe build, confirming this is an upstream shared issue, not specific to any deployment target.
Steps to Reproduce
- Open Settings → General
- Click any
SelectV2(Language / Shell / Color Scheme / Theme) - Select an option from the list
- Click the same
SelectV2trigger again - Expected: Dropdown opens normally
- Actual: Nothing appears (or flickers briefly)
Happens 100% of the time on the 2nd open after item selection.
Diagnostic Evidence
With a DOM probe added after onOpenChange(true):
[select-v2] POPOVER MISSING action=settings-language elapsed=1986ms cycle=4
[select-v2] diagnostics: portalInDom=false triggerExpanded=false listboxInDom=false
portalInDom=false— Kobalte's<Portal>is not mounting content todocument.bodytriggerExpanded=false— even thoughonOpenChange(true)was called, trigger'sdata-expandedattribute is not setlistboxInDom=false— no drop-down list in the DOM at all
Root Cause
Kobalte's <Portal> component enters a broken state after the first onChange (item selection). On the next open, onOpenChange(true) fires correctly (the state machine works), but <Kobalte.Content> / <Kobalte.Listbox> are never rendered into the portal. This only happens after an item has been selected — pure open/close without selection does not trigger the bug.
Environment
@kobalte/coreversion: 0.13.x (per workspace catalog)- SolidJS version: 1.9.x (per workspace catalog)
- Browser: Any (reproduced in Chrome)
- OS: Windows (Docker-hosted instance)
Workaround
Forcing Kobalte to unmount/remount after every item selection resolves the issue:
// In SelectV2 component:
const [_mounted, setMounted] = createSignal(true)
const remountKobalte = () => {
setMounted(false)
requestAnimationFrame(() => setMounted(true))
}
// In JSX:
<Show when={_mounted()}>
<Kobalte ...>
</Show>
// In onChange:
onChange={(next) => {
const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
local.onSelect?.(v)
stop()
setTimeout(remountKobalte, 0) // force fresh instance after selection
}}Plugins
No response
OpenCode version
No response
Steps to reproduce
[select-v2] POPOVER MISSING action=settings-language elapsed=1986ms cycle=4
[select-v2] diagnostics: portalInDom=false triggerExpanded=false listboxInDom=false
Screenshot and/or share link
No response
Operating System
No response
Terminal
No response
Activity
github-actions commentedon Jul 24, 2026
This issue might be a duplicate of existing issues. Please check:
TJKCYN commentedon Jul 24, 2026
This goes beyond #38083 — that issue only reports the symptom. This report includes:
DOM-level diagnostic evidence (portalInDom=false — Kobalte Portal simply stops rendering)
Reproduction narrowed to onChange — item selection is the trigger, not open/close alone
A functional workaround (force-remount Kobalte after onChange)
I'd like to keep this open as the implementation-focused companion to #38083, ideally leading to a fix.
suxiaogang223 commentedon Jul 29, 2026
Another possible fix that is lighter than force-remount: deferring the
onSelectcallback viaqueueMicrotaskso Kobalte fully completes its Portal cleanup before any reactive state update runs.In
packages/ui/src/v2/components/select-v2.tsxandpackages/ui/src/components/select.tsx:Rationale: In Kobalte's
onSelectionChange,onChangefires first (triggering user callback + SolidJS store update), thenclose()runs (closing dropdown, portal cleanup). Both updates land in the same SolidJS batch. When the batch flushes, DOM modifications from the store's effect (e.g. theme CSS updating<style>elementtextContent) collide with Kobalte's portal cleanup/close animation, corrupting the Portal's internal state.By deferring the user callback to the next microtask, Kobalte finishes
close()→ portal cleanup → batch flush completely first, THEN the reactive update runs separately. This avoids the collision without needing to unmount/remount the component.Would be interested to hear if this resolves the issue for anyone who can test it.
min23asdw commentedon Aug 22, 2026
Is It have PR yet ? V1.18.20 still can't scroll in web General setting
neriousy commentedon Oct 20, 2026
Fixed by #39027, which stops Kobalte's duplicate selection events from closing the select. It shipped in v1.18.7 and is included in v2 (v2.0.27 and later). If the dropdown still won't reopen after picking an option on the latest v2, comment with your version and we'll reopen. A scrolling problem in General settings is a separate bug, so please open a new issue for that.