A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder

Hello there! I have encountered the following issue: :sob: @Mosh

<Select
    defaultValue={issue.assignedToUserId || ""}
    onValueChange={assignIssue}
>
      <SelectTrigger>
          <SelectValue placeholder="Unassigned" />
      </SelectTrigger>
      <SelectContent>
           <SelectGroup>
               <SelectLabel>Suggestions</SelectLabel>
           <SelectItem value="">Unassigned</SelectItem>
              {users?.map((user) => (
                 <SelectItem
                     key={user.id}
                     className="cursor-pointer"
                     value={user.id}
                  >
                      {user.name}
                 </SelectItem>
              ))}
          </SelectGroup>
      </SelectContent>
</Select>

For some reason it argues because of the empty string here <SelectItem value="">Unassigned</SelectItem>. I am using schadcn/ui, which is build on top of RadixUI so I decided to give it a go, so far this is the only issue, if someone could help me please to cope with it?

Hi I think I solved the problem.

  1. onValueChange: when assigning a value to assignedToUserId, make a condition: assignedToUserId: userId === “unassigned” ? null : userId,

  2. <Select.Item value=“unassigned”>Unassigned</Select.Item>
    So by default, assignedToUserId = “unassigned”, and when we choose a user, it get
    the userId.

Hope it helps. It woks on my computer😉

2 Likes

Thank you. It’s indeed solved the issue. However in the next sections of the course: We will encounter the problem with filtering the statuses, at this point this trick is not going to work I suppose. So I thought there is a reason why some people get such an error :smiling_face_with_tear: :smiling_face_with_tear: :smiling_face_with_tear:

Work here to solve filter problem:

import { Status } from '@prisma/client'
import { Select } from '@radix-ui/themes'
import { useRouter } from 'next/navigation'

const statuses: { label: string; value?: Status }[] = [
  { label: 'All' },
  { label: 'Open', value: 'OPEN' },
  { label: 'In Progress', value: 'IN_PROGRESS' },
  { label: 'Closed', value: 'CLOSED' },
]

const IssueStatusFilter = () => {
  const router = useRouter()

  return (
    <Select.Root
      onValueChange={(status) => {
        const query = status === 'ALL' ? '' : `?status=${status}`
        router.push(`/issues/list${query}`)
      }}
    >
      <Select.Trigger placeholder='Filter by status...' />
      <Select.Content>
        {statuses.map((status) => (
          <Select.Item
            key={status.value}
            value={status.value ?? 'ALL'}
          >
            {status.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  )
}

export default IssueStatusFilter

2 Likes

Thank you for the solution. I would suggest you may need to update defaultValue={issue.assignedToUserId || "unassigned"} to show “Unassigned” as default

For those who are interested to follow the course, if you pay good attention, Mosh installed @radix-ui/themes**@1.1.2**, that will resolve the problem. For some reason the maintainer had updated the radix-ui/theme package.

2 Likes

change the version of "@radix-ui/themes":"^1.1.2" in package.json and then run npm install
do this because u face same issue multiple times

1 Like
  1. add a new line with useState before IsLoading statement
    const [assigneeField, setAssigneeField] = useState(issue.assignedToUserId || ‘Unassigned’)

  2. Change Select.Root to
    <Select.Root
    value={assigneeField}
    onValueChange={async (userId) => {
    await axios.patch(/api/issues/${issue.id}, {
    assignedToUserId: userId === ‘Unassigned’ ? null : userId,
    })
    setAssigneeField(userId)
    }}>

  3. Change the Unassigned Select.Item field to
    <Select.Item value=“Unassigned”>Unassigned</Select.Item>

This is useful for those who do not want to downgrade the Radix UI since ^2.0.0 is a major update.

Thank you very much. This solved my issue. :grinning:

Here is i have found some solution using the latest version of redix UI

const handleValueChange = (userId : any) => {
        axios.patch(`/api/issues/${issue.id}`, { assignToUserId: userId === 'unassign' ? null : userId })

      };

    return (
        <Select.Root onValueChange={handleValueChange}>
            <Select.Trigger placeholder='Assign ...' />

            <Select.Content>

                <Select.Group>
                    <Select.Label>Suggestion</Select.Label>
                    <Select.Item value="unassign">Unassign</Select.Item>
                    {users?.map((user) => {
                        return (
                            <Select.Item key={user.id} value={user.id}>{user.name}</Select.Item>
                        )
                    })}

                </Select.Group>

            </Select.Content>

        </Select.Root>
    )