1. Feedback
  2. React
  3. 46657

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

4
Votes

onClick events don't work on child components if dialog has no target set

I'm using DialogComponent with no target set (as I have a single page app and the dialogs don't need to be positioned/constrained) but I found that onClick events on button components inside the DialogComponent were not working.

I searched the forums and found this:

https://www.syncfusion.com/forums/165828/event-handlers-are-not-attaching-to-button-which-is-mentioned-in-content-of-dialog

So issue 2 is what I was having. The response from Syncfusion is to use the content template, so I started doing that, although SF doesn't explain why you need to use the content template instead of just putting the content under DialogComponent.

However I ran into other issues by using the content template instead - which is that the content template components are rendered before the dialog is visible so any component which needs to make size adjustments based on its rendered height get confused (in my example a rich text component was not sizing its body height).

So I investigated why onClick events on buttons don't work when DialogComponent has no target when not using content template and I realised it seems to be down to how React handles click events in that it just attaches a noop to the actual DOM element and instead looks like it catches them higher up the DOM tree. If no target is set on the DialogComponent it moves itself to the body element which is outside of the app and perhaps this is why the click handling fails to work (I guess when using the content template the rendering happens in a different order and that may be why it still works in that case - I've not delved into it any further and I'm quite new to react).

I set up a test where we have a dialog with a parent div as a target, one with the app root div as the target, one with no target (so the page body is used), another with no target but with a content template and finally one with a target but the target is an element outside of the app root div. Each has a simple button with an onClick that does an alert - the onClick doesn't work on the ones with targets outside of the app root except for the one which uses the content template property.

https://stackblitz.com/edit/react-fb6xtg-eggdz5?file=index.js,index.html

I guess you could argue this isn't a bug in DialogComponent, that instead the developer using the component needs to ensure they target the DialogComponent to their application root element or below.

But if that's the case I'd suggest it's a documentation bug - there should be a warning on the DialogComponent documentation  React letting developers know that if they don't set a target and the default of "body" is used that onClick handlers won't work on components inside the DialogComponent unless they use "content" to set the content instead.