Select component freezing Browser Tab on with display: "content" in form #8179
Description
Dependencies check up
- I have verified that I use latest version of all @mantine/* packages
What version of @mantine/* packages do you have in package.json?
8.2.5
What package has an issue?
@mantine/core
What framework do you use?
Vite
In which browsers you can reproduce the issue?
All
Describe the bug
Tested on Chromium Build 138.0.7204.183 & FireFox 141.0.3
In the attached codesandbox (using StackBlitz - hope you don't mind), I've create a narrowed version of the form I'm currently building using the @mantine/form package.
I use the Select in it to make a Error category selectable before the actual error code. For this visually to work, I've overwritten the dispay styles from an TextInput and the Select to "display": "content" to propagate a surrounding plain grid to make the alignment happen.
However, in current composition, when clicking on the Select with two elements, it freezes the whole website.
This only is the case, if the Select's data attribute has 2 or more elements in it and I'm not deleting any of the other inputs in the current form.
I already discovered #7999 and its fix (setting comboboxProps={{ keepMounted: false }} doesn't help.
I've also queried Grok 4 and it recommended using the more verbose Input component to prevent the content display, but its suggested code didn't solve the issue
Grok's Code
<div className="grid gap-x-4 grid-rows-[repeat(3,fit-content())] grid-cols-[minmax(100px,1fr)_2fr] sm:grid-cols-[180px_2fr]">
{/* Shared label - positioned in grid */}
<Input.Label
required
styles={{
label: {
gridColumn: '1 / span 2',
gridRow: '1',
},
}}
>
Fehlercode
</Input.Label>
{/* Shared description - positioned in grid */}
<Input.Description
styles={{
description: {
gridColumn: '1 / span 2',
gridRow: '2',
},
}}
>
Bitte teilen Sie uns einen der vordefinierten Fehlercodes mit.
</Input.Description>
{/* Select - no display: contents, just position wrapper */}
<Select
placeholder="Wähle eine Kategorie"
data={[
{ value: 'test01', label: 'Test 1' },
{ value: 'test02', label: 'Test 2' },
]}
{...form.getInputProps('errorCodeCategory')} // Proper binding to form
styles={{
wrapper: {
// mimic TextInput default styles
marginTop: '5px',
gridColumn: '1 / span 1',
gridRow: '3',
},
}}
/>
{/* TextInput - no label/description here, no display: contents */}
<TextInput
required
placeholder="Wähle einen Fehlercode"
key={form.key('errorCode')}
{...form.getInputProps('errorCode')}
disabled={!form.values.errorCodeCategory}
styles={{
wrapper: {
gridColumn: '2 / span 1',
gridRow: '3',
},
}}
/>
</div>I'm really clueless, would be glad for any help :)
If possible, include a link to a codesandbox with a minimal reproduction
https://stackblitz.com/edit/vitejs-vite-ac3cadaf?file=src%2FApp.tsx
Possible fix
No response
Self-service
- I would be willing to implement a fix for this issue