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

Next.js
1

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

Error
Error1946×1650 317 KB

<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?

2

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😉

3 Likes
3

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:

4

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
5

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

6

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.

1 Like
7

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
8

  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>

10

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

11

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

12

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>
    )
1 Like