Select none
A value for a select's "none" option, which reka-ui won't let be the empty string, and the helpers that translate it back.
Nuxt UI's USelect and USelectMenu are built on reka-ui, which throws during render if an item has value="": it reserves the empty string for "no selection, show the placeholder". So an explicit "No project" option can't use it. The throw aborts the patch, and what you see is not an error but a modal that won't close and a field that seems to reset itself.
The option holds SELECT_NONE ('__none__') instead, and the value is translated back where it leaves the form. All four are auto-imported from @zooui/nuxt.
Update sends {"project":null}
<script setup lang="ts">
const items = [
{ label: 'No project', value: SELECT_NONE },
{ label: 'Kitchen remodel', value: 'p-1' },
{ label: 'Roof repair', value: 'p-2' },
]
const project = ref(SELECT_NONE)
</script>
<template>
<div class="flex w-full max-w-xs flex-col gap-3">
<UFormField label="Project">
<USelect v-model="project" :items="items" class="w-full" />
</UFormField>
<p class="m-0 text-sm text-muted">
Update sends <code>{{ JSON.stringify({ project: selectNoneToNull(project) }) }}</code>
</p>
</div>
</template>SELECT_NONE | The value for the "none" option. |
selectNoneToUndefined(v) | What to send when the option is chosen, or the value is empty: undefined, so a create leaves the field out. |
selectNoneToNull(v) | The same for an update, where clearing a field means an explicit null. |
emptyToSelectNone(v) | What to put in the select for a value that may be absent, so a record with no project shows "No project". |