onClick Event on a Select.Item

[Jauki]

Hello there👋
In my React TypeScript project, I'm using Radix UI's Select component to create a dropdown menu for rooms. However, it seems that the Select component is designed primarily for string values, and the onValueChange prop in the Select.Root doesn't directly facilitate handling complex objects, such as my Room type.

Here's a simplified version of my code:

const { setRoom } = useRoom();

const handleRoomChange = (newRoom: Room) => {
  console.log('Selected Room:', newRoom);
  setRoom(newRoom);
};

return (
  <Select.Root>
    <Select.Trigger>
      <Select.Icon>🌵</Select.Icon>
      <Select.Value placeholder='Select a room...' />
    </Select.Trigger>
    <Select.Content>
      <Select.Viewport>
        {/* Rendering Select.Groups and Select.Items based on available rooms */}
        {rooms.map((room, k) => (
          <Select.Item
            key={room.id}
            value={uuidv4()}
            onPointerDown={(event) => event.preventDefault()}
            onClick={() => handleRoomChange(room)}
          >
            <Select.ItemText>{room.roomName}</Select.ItemText>
          </Select.Item>
        ))}
      </Select.Viewport>
    </Select.Content>
  </Select.Root>
);

The issue is that the onClick event in the Select.Item does not seem to be triggering as expected, preventing me from setting the selected room to the context.

I'm considering whether I should explore creating a custom Select component using the Radix UI Select API to better suit my requirements. Any insights or recommendations on handling complex objects within Radix UI Select would be greatly appreciated.

[mamlzy]

@jjenzz @benoitgrelard 🙏

[jjenzz]

@Jauki the radix select only allows string values because it applies your values to the native <select> options for a11y, and HTML can only have string values. instead it provides an onValueChange api so that you can derive the value:

const roomsMap = React.useMemo(() => new Map(rooms.map(room => [room.id, room])), [rooms]);
const { room, setRoom } = useRoom();

return (
  <Select.Root value={room.id} onValueChange={id => setRoom(roomsMap.get(id))}>
    <Select.Trigger>
      <Select.Icon>🌵</Select.Icon>
      <Select.Value placeholder='Select a room...' />
    </Select.Trigger>
    <Select.Content>
      <Select.Viewport>
        {rooms.map((room, k) => (
          <Select.Item key={room.id} value={room.id}>
            <Select.ItemText>{room.roomName}</Select.ItemText>
          </Select.Item>
        ))}
      </Select.Viewport>
    </Select.Content>
  </Select.Root>
);

[mamlzy]

thank you for your response! could you show me the full code of rooms variable and the useRoom hook. I don't really use Map and I just want to be clearer about your example, thanks!

[jjenzz]

i copied the hook from the original post here so i'm not sure of its implementation, but ideally you wld have a simple id state instead and then you wouldn't need the roomsMap.

const [selectedId, setSelectedId] = React.useState('');

//...

<Select value={selectedId} onValueChange={setSelectedId}>