ethanmick/time-tracker

A Time Tracker SaaS App

Time Tracker SaaS

Features

• Time Tracking by Activity
• Clients
• Projects
• Reports
• Authentication
• Teams?
• Billing

time-tracker's Issues

Cannot sign in

Cannot login

Unhandled Runtime Error Error: A <Select.Item /> must have a value prop that is not an empty string

Hi Ethan,

I am having the issue with the following shadcn select component:
<SelectItem value="">None</SelectItem>

It gives the following error:

Unhandled Runtime Error
Error: 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.

The current shadcn version does not accept empty string value="" anymore.

please find below the content of my package.json version:

{
  "name": "time-tracker",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "devs": "next dev --experimental-https",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "^5.5.2",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "date-fns": "^2.30.0",
    "lucide-react": "^0.291.0",
    "next": "14.0.1",
    "next-auth": "^4.24.4",
    "react": "^18.2.0",
    "react-day-picker": "^8.9.1",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20.8.10",
    "@types/react": "^18.2.33",
    "@types/react-dom": "^18.2.14",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.52.0",
    "eslint-config-next": "14.0.1",
    "postcss": "^8.4.31",
    "prisma": "5.5.2",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.2.2"
  }
}

I have tried the following for example from the projects->edit->page.tsx

await prisma.project.updateMany({
      where: {
        id: params.id,
        tenantId: user.tenant.id
      },
      data: {
        name: data.get('name') as string,
        color: data.get('color') as string,
        //clientId: client ? client : null
        clientId: client==="None" ? undefined : client
      }
    })

<div>
          <Label htmlFor="email">Client</Label>
          <Select name="client" defaultValue={project.clientId ?? ''}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Assign a Client" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectLabel>Client</SelectLabel>
                <SelectItem value="None">None</SelectItem>

It doesn't seem to work well,
could you provide any fix?

Thank you very much.
BR