[Bug]: custom toolbar component does not respond to click events

Question

[Bug]: custom toolbar component does not respond to click events

sabriedd opened this issue 3 months ago · comments

What happened?

I'm trying to build a custom toolbar with more complex user interface than just buttons. When passing my Toolbar to the components props, the components then lack interactivity.

outside of the Tldraw context; the component react to clicks, but the one in Tldraw's component do not, instead, the event is only affecting the svg background

How can we reproduce the bug?

codesandbox

What browsers are you seeing the problem on?

Firefox, Chrome

Contact Details

discord: spoonboy6291

Code of Conduct

I agree to follow this project's Code of Conduct

Linear · Answer 1 · Tue Apr 16 2024 23:28:59 GMT+0800 (China Standard Time)

TLD-2406 [Bug]: custom toolbar component does not respond to click events

Steve Ruiz · Answer 2 · Wed Apr 17 2024 18:10:15 GMT+0800 (China Standard Time)

Here's the fix! https://codesandbox.io/p/sandbox/thirsty-rosalind-cswltf?file=%2Fsrc%2FApp.tsx%3A5%2C11

The container's tl-containerclass turns off pointer-events for all of its descendants. In order to make things interactive, you need to set pointer-events back to all.