Feature Request: Stop click event propagation

[zachgibson]

My use-case is a bit different than your example. I’m rendering pseudo UI, e.g. a button that is comprised of a rectangle and text on top of it. Using this pseudo button as an example, when I click the text, the event propagates and both the text and the rectangle are selected. I need to be able to select items individually regardless if they’re on top of other elements.

@valerybugakov What are your thoughts on this? I’m happy to create a PR if you could point me in the right direction of where this propagation would need to stop. And I’m assuming this would need to be an optional prop as it’d probably break existing behavior just adding it.

[valerybugakov]

Hey @zachgibson, it happens because click event is handled the same way as item selection via the select lasso. We collect the coordinates of the click event, then select all selectable items intersecting with these coordinates.

The way to fix it from the top of my head is to handle click separately. If we see that e.target is a selectable item then we can just select it instead of calling this.selectItems. It should be done in SelectableGroup method handleClick.

[sergejostranow]

Hey I have a similar question, I guess. The component I use as a createSelectable needs to react to a separate onClick event - I always want to know which component in the grid was clicked on last. But when I add an onClick handler the clicks are being ignored. Do you have any suggestion for me on how to solve it?

I did not understand what you mean by

It should be done in SelectableGroup method handleClick.

• is this a function already implemented on SelectableGroup ? If so, I could not find it in the docs.

Thanks a lot in advance, I really love this package! :)

[vickyvishal]

Hey I have a similar question, I guess. The component I use as a createSelectable needs to react to a separate onClick event - I always want to know which component in the grid was clicked on last. But when I add an onClick handler the clicks are being ignored. Do you have any suggestion for me on how to solve it?

I did not understand what you mean by

It should be done in SelectableGroup method handleClick.

• is this a function already implemented on SelectableGroup ? If so, I could not find it in the docs.

Thanks a lot in advance, I really love this package! :)

I have the same issue. Did you find anything? :)

[vickyvishal]

Okay, the only workaround is to move the component with the separate onClick outside the <SelectableGroup /> and place it using the properties selectedItems[i].bounds via css

[linxianxi]

Hey @zachgibson, it happens because click event is handled the same way as item selection via the select lasso. We collect the coordinates of the click event, then select all selectable items intersecting with these coordinates.

The way to fix it from the top of my head is to handle click separately. If we see that e.target is a selectable item then we can just select it instead of calling this.selectItems. It should be done in SelectableGroup method handleClick.

I don't understand what to do.Can you be more specific or give an example? thank you