onClick event not working in material-ui components about craft.js HOT 7 CLOSED

I think the most sensible solution for time being will be to re-enable onClick propagation and introduce an internal flag system so that craft can handle selection events properly, @prevwong i can try and draft a PR for that

from craft.js.

@dadwic @ymoussaba @hdaggett Fixed in 0.1.0.beta-8! 🥳

from craft.js.

So this is because the connect/select connector adds a onClick event handler to the DOM element and it prevents propagation, so this means any other onClick handler that you add will not be fired 😢

We would definitely like to improve this behaviour. But in the meantime, the temporary workaround is to use a side effect that reacts to the selected event:

const Button = () => {
  const { selected } = useNode(node => ({ selected: node.events.selected });

  useEffect(() => {
    if ( selected ) {
      console.log("Button clicked!")
   } 
  }, [selected]);
} 

from craft.js.

Yeah, previously for the select handler, we were using onMouseDownCapture with debounce, which made it possible for you to add your own event handlers without issues.

But this had some caveats for us internally. For example, the event handler would be fired multiple times (so in the case of the select handler, we will be calling setNodeEvent multiple times, which was not ideal)

from craft.js.

const Button = () => {
  const { selected } = useNode(node => ({ selected: node.events.selected });

  useEffect(() => {
    if ( selected ) {
      console.log("Button clicked!")
   } 
  }, [selected]);
} 

This doesn't work for components that have multiple elements that may be clicked inside them :(

from craft.js.

Thanks,
In the previous version (v0.1.0-beta.6), this bug did not exist!

from craft.js.

I was dealing with this issue after an update too. I use a popover to edit the components. But since most react libraries (Antd in my case) are relying on onClick, nothing works.

Wouldn't there be a way to use another event than the onClick?

from craft.js.