how to use Combobox with useForm ?

[byungmin12]

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?

7.13.2

What package has an issue?

@mantine/form

What framework do you use?

Vite

In which browsers you can reproduce the issue?

None

Describe the bug

I used combobox to customize options with useForm.
and I wanted combobox to reset data. but it wasn't working.
I used useForm with uncontrolled mode and put form.key into combobox.

<Combobox
     store={combobox}
     onOptionSubmit={val => {
       setValue(val);
       typeInputProps.onChange(val);
       combobox.closeDropdown();
       onChange(val);
     }}
   >
     <Combobox.Target>
       <InputBase
         variant="unstyled"
         component="button"
         type="button"
         pointer
         key={inputKey}
         rightSection={<Combobox.Chevron />}
         rightSectionPointerEvents="none"
         onClick={() => combobox.toggleDropdown()}
         {...typeInputProps}
       >
         <TypeBadge type={(value as EFieldType) ?? EFieldType.STRING} />
       </InputBase>
     </Combobox.Target>

     <Combobox.Dropdown>
       <Combobox.Options>{options}</Combobox.Options>
     </Combobox.Dropdown>
   </Combobox>

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Combobox component is not an input, it should be used to create a component which it then can be integrated with useForm. To create such component:

• For controlled form mode – the component must support value and onChange props
• For uncontrolled form mode – the component must support defaultValue and onChange props

You can learn more on how to build custom components that support these properties by exploring Mantine components source code,

[byungmin12]

wow. thank you.
I thought I had to show the value made by useState. but it couldn't change initial value if the reset happened.
As you told me, I use defaultValue and it help me know what is the initial value.

     <Combobox.Target>
       <InputBase
         variant="unstyled"
         component="button"
         type="button"
         pointer
         key={inputKey}
         rightSection={<Combobox.Chevron />}
         rightSectionPointerEvents="none"
         onClick={() => combobox.toggleDropdown()}
         {...typeInputProps}
       >
         <TypeBadge type={typeInputProps.defaultValue ?? EFieldType.STRING} />
       </InputBase>
     </Combobox.Target>