Combobox: onClick not working

[felixhaeberle]

Hey everybody! I have this challenge of having an onClick handler in an Combobox.Optionwhich should trigger an Modal to open.

Here is the design.
Clicking on the 3-dot menu should open the modal.

But instead, the select fires and no modal gets opened.

<Combobox.Options
  static
  className="max-h-60 w-full rounded-md bg-white text-base shadow-lg sm:text-sm"
>
  {/* <div className="w-full font-semibold text-slate-500 text-sm pt-2 pb-1 pl-3">
    Select a label or create one
  </div> */}
  {filteredLabels.map((label) => (
    <Combobox.Option
      key={label.id}
      value={label}
      className={({ active }) =>
        clsx(
          "relative cursor-default select-none p-2 pl-3 font-medium text-xs text-slate-500",
          active && "bg-slate-50"
        )
      }
    >
      {({ active }) => (
        <div className="flex flex-col gap-1">
          <div className="flex flex-row justify-between">
            <Label label={label} />
            {active && (
              <span
                className={clsx(
                  "inset-y-0 left-0 flex items-center pl-1.5",
                  active && "text-gray-400"
                )}
                onClick={() => {
                  setEditLabel(label);
                  setLabelEditModalOpen(true);
                }}
              >
                <DotsHorizontalIcon
                  className="h-5 w-5"
                  aria-hidden="true"
                />
              </span>
            )}
          </div>
          <span>{label.description}</span>
        </div>
      )}
    </Combobox.Option>
  ))}

Can somebody help or does somebody have a similar issue?
Thanks a lot!!