`toggleContinueSelect` not working (MacOS, Chrome)
tomelliot opened this issue · comments
Environments
- Framework name: React
- Framework version: react@18.2.0
- Component name: react-selecto
- Component version: react-selecto@1.26.3
- 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);
});
}}
/>
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.