fix: select field ux (#1334)

When the Select field has a default value, it automatically signs with
it. If you change it, you need to refresh the page to re-sign again with
that value. This PR improves the UX by making the default value
"selectable" in the dropdown menu.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Updated the `DropdownField` component to simplify the handling of
default values, ensuring the dropdown starts without a pre-selected
option.
- Improved the clarity of the placeholder text in the dropdown,
enhancing user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Catalin Pit
2024-09-10 06:15:47 +03:00
committed by GitHub
parent ad135b72d8
commit e1b2206d28

View File

@ -127,7 +127,7 @@ export const DropdownField = ({
await removeSignedFieldWithToken(payload);
}
setLocalChoice(parsedFieldMeta.defaultValue ?? '');
setLocalChoice('');
startTransition(() => router.refresh());
} catch (err) {
console.error(err);
@ -179,7 +179,7 @@ export const DropdownField = ({
{!field.inserted && (
<p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
<Select value={parsedFieldMeta.defaultValue} onValueChange={handleSelectItem}>
<Select value={localChoice} onValueChange={handleSelectItem}>
<SelectTrigger
className={cn(
'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
@ -189,7 +189,7 @@ export const DropdownField = ({
},
)}
>
<SelectValue placeholder={`-- ${_(msg`Select`)} --`} />
<SelectValue placeholder={`${_(msg`Select`)}`} />
</SelectTrigger>
<SelectContent className="w-full ring-0 focus:ring-0" position="popper">
{parsedFieldMeta?.values?.map((item, index) => (