Is it possible to set a default selected value only after the dropdown is opened in MantineUI's Select component?

Question

I am using the Select component from MantineUI v6 in my project. By default, I want the select box to have no value selected. However, I want to set a default value ('Asia/Tokyo' in this case) only after the user clicks on the select box and the dropdown options are displayed.

In the following example, the default value is set to 'Asia/Tokyo' using the defaultValue prop. As a result, the value is set even before the user interacts with the select box. I would like to change this so that the default value is only selected after the dropdown is opened by the user.

<Select
  data={TIME_ZONE_OPTIONS}
  defaultValue={'Asia/Tokyo'}
  searchable
  value={form.values['timeZone'] ?? null}
  variant="default"
/>

Is it possible to achieve this behavior with MantineUI's Select component?

Answer 1

There should be a "placeholder" value that you could set as well as "touched" (boolean) to know if a user has put focus on the dropdown or not at least once. These are basic variables in React forms, so I would imagine they would still work.

This is an example of a MantineUi Select dropdown with a placeholder:

<Select
mt="md"
comboboxProps={{ withinPortal: true }}
data={['React', 'Angular', 'Svelte', 'Vue']}
placeholder="Pick one"
label="Your favorite library/framework"
classNames={classes}
/>

I believe you would just have to add the 'placeholder' variable to yours and it should work