toggleContinueSelect not working (MacOS, Chrome)

[tomelliot]

Environments

• Framework name: React
• Framework version: [email protected]
• Component name: react-selecto
• Component version: [email protected]
• Testable Address(optional):

Description

This could definitely be me not knowing the right way to use Selecto, but I'm seeing that I can't use the toggleContinueSelect to allow continuing to select. If a selection is present and I hold shift and either click or drag to add to the selection, then the selection is deselected. I can then create a new selection again. I'm finding it works as expected otherwise.

Here's the implementation, let me know if I can provide any more info:

<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={assetSelectorRef.current}
            // 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) => {
              if (state == "saving" || state == "generating") return;
              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);
              });
            }}
          />

[tomelliot]

I'm seeing that the behaviour is different if I use toggleContinueSelect={[["shift"]]} (it seems to work) instead of toggleContinueSelect="shift". This is confusing - I'm not sure what I'm missing here.