Inconsisent onSelect behaviour in `react-selecto`

[tomelliot]

Environments

• Framework name: Typescript, built with Vite
• Framework version: Vite 5.2.8
• Component name: react-selecto
• Component version: 1.26.3
• Testable Address(optional):

Description

I'm seeing inconsistent behaviour in react-selecto. Clicking an item will sometimes fire the onSelect handler, and other times will not.

I have a screenshot here showing

• the onSelect handler logging whenever it is called
• the <div> that is a "target" for Selecto logging whenever its onClick is fired

Selecto:

<Selecto
            // The container to add a selection element
            container={assetSelectorRef.current}
            // Targets to select. You can register a queryselector or an Element.
            selectableTargets={[".target"]}
            // Whether to select by click (default: true)
            selectByClick={true}
            // Whether to select from the target inside (default: true)
            selectFromInside={true}
            // After the select, whether to select the next target with the selected target (deselected if the target is selected again).
            continueSelect={false}
            // Determines which key to continue selecting the next target via keydown and keyup.
            toggleContinueSelect={[["shift"]]}
            // The container for keydown and keyup events
            keyContainer={window}
            // The rate at which the target overlaps the drag area to be selected. (default: 100)
            hitRate={30}
            scrollOptions={{
              threshold: 40,
              container: assetSelectorRef,
              throttleTime: 20,
              checkScrollEvent: true,
            }}
            onScroll={({ direction, container }) => {
              container.scrollBy(direction[0] * 10, direction[1] * 10);
            }}
            onSelect={(e) => {
              console.log(
                `onSelect - ${e.added.length} item/s added - ${e.removed.length} item/s removed`
              );
              if (state == "saving" || state == "generating") return;
              if (selected.length < selectMax) {
                e.added.forEach((el) => {
                  const assetId = el.dataset.assetid;
                  if (!assetId) return;
                  handleSelectAssetId(assetId);
                });
              }
              e.removed.forEach((el) => {
                const assetId = el.dataset.assetid;
                if (!assetId) return;
                handleDeselectAssetId(assetId);
              });
            }}
          />

    <div
      key={asset.asset.id}
      data-assetid={asset.asset.id}
      className={clsx(
        "relative h-fit flex flex-col border",
        disabled
          ? "pointer-events-none opacity-50"
          : "hover:bg-wf-background2 target",
        asset.selected
          ? "border-wf-blueBorder bg-wf-background2"
          : "border-transparent"
      )}
      onClick={() => {
        console.log(`clicked on asset ${asset.asset.id}`);
      }}
      onMouseOver={disabled ? () => flashHighlightTrial() : () => {}}
    >
...
</div>

How can I go about debugging/working around this? Drag to select works as expected.

[tomelliot]

Looking at this further, the onSelect handler is being fired twice for a single mouse click on some occasions. I assume there's something in my implementation causing this (otherwise others would have noticed it) - is there a way to work out what's going on?