Problem using different Combobox wrappers with same options at different screen sizes

[crimson rover]

I'm using Mantine 8.3.16, and I have an issue with a page that contains a combobox.

When viewed on a large screen, I want all of the combobox options visible all of the time in a static column. On smaller screens, I want the normal behavior where the options only appear for selection after clicking on the target. My original version of the page used conditional rendering to generate completely different output for the full page depending on the screen size. I thought I could simplify it by making only the combobox style conditional, but it's not working for some reason.

The combobox behavior on large screens is working fine. The version for small screens, though, does nothing when I click the target. The options don't display.

What's odd is that if I make some change to the component file (it doesn't matter what) when testing the mobile version, the browser refresh causes the option list to appear, and I can select an option. But once the list closes again, clicking the target doesn't reopen it.

I've reproduced the problem here:

https://codesandbox.io/p/devbox/mantine-react-template-forked-vy3qw7

Slide the divider between the code and the output to trigger the size difference and test each version.

I've looked through the samples in the docs, and everything looks good as far as I can see, but maybe I overlooked something...or maybe it's a rare bug? 🤷‍♂️

[ancient schooner]

Here is what Claude recommends

The bug: stale combobox store captured in useMemo

The user wraps comboboxComponent in useMemo(() => {...},
[selectedResource, isMobile]). But useCombobox() returns a
new store object on every render (a snapshot of hook state +
fresh callbacks). When comboboxComponent is memoized with
deps that don't include combobox, the JSX inside forever
holds a reference to the first-render store — which has
dropdownOpened: false frozen into it.

What happens on click:

1. User's onClick={() => combobox.toggleDropdown()} fires
   with the stale store captured in the memoized JSX.
2. The stale toggleDropdown still successfully calls
   setDropdownOpened(true) because setState is stable — React
   state updates correctly.
3. Re-render runs; a new store with dropdownOpened: true is
   produced by useCombobox, but nobody uses it.
4. useMemo returns the cached JSX, which still holds the old
   store with dropdownOpened: false.
5. <Combobox store={oldStore}> passes opened={false} to
   Popover → dropdown never shows.

The "refresh makes the list appear once" symptom is just
Fast Refresh preserving React state while remounting
closures — first render happens to capture the preserved
opened=true, then the next close freezes it shut again.

I verified this by reproducing their exact code in a
Storybook story (bug reproduced: click does nothing), then
adding combobox to the useMemo deps (bug gone: dropdown
opens and closes correctly).

Fix

The simplest fix: remove useMemo around comboboxComponent.
It isn't saving meaningful work and it's breaking
reactivity: