I have a shadcn/ui Select component based on UI.

I have a global click handler that deselects my selection state. It checks for exceptions to this with

if (
        target.closest(".musical-group") ||
        target.closest(".keep-selection") ||
        target.closest(".radix-select-content")
      ) {
        console.log("User clicked on musical group or keep-selection element");
        return;
      }

This does work for all of my elements except the dropdown. I have determined that if I change the onClick to an onPointerDown event, the method works, because of the way Radix creates a portal to the root HTML element of the DOM. This however is very bad for UX because it is not the traditional way that select components work.

<Select
            value={currFont}
            onValueChange={changeFont}
            disabled={!canPerformEdits}
            onOpenChange={(open) => {
              if (open && "selectJustClosed" in window) {
                // Select is closing, don't clear selection for a brief moment
                window.selectJustClosed = true;
                setTimeout(() => (window.selectJustClosed = false), 100);
              }
            }}
          >
            <SelectTrigger
              
             
              className="w-48 keep-selection tool-button"
            >
              <SelectValue placeholder="Font" />
            </SelectTrigger>
            <SelectContent
              className="keep-selection tool-button"
              onPointerDownOutside={(e) => e.preventDefault()}
            >
              {FONTS.map((f) => (
                <SelectItem
                  key={f}
                  value={f}
                  style={{ fontFamily: f }}
                  className="keep-selection tool-button"
                >
                  {f}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>