Hi Synfusion Team,
I am using DialogComponent. I have a button, but I can't detect the onClick event of it.
Sample link: https://stackblitz.com/edit/react-ntrkyi
How I can fix this.
Regards,
Hung
Hi Ton,
Greetings from Syncfusion support.
This issue occurs because of the breaking changes (Changes to Event Delegation) in React Version 17. Please check the below link for reference,
https://reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation
As of now, the event will be bound to the element based on the component rendered on the page. You rendered the dialog component in the body element. So, button click action is not bound.
You can be resolved by binding the events in the ‘componentDidMount’ method or useEffect of the react, where the events will be bound properly. We have prepared a sample for your reference.
|
export function Modal() { // Similar to componentDidMount and componentDidUpdate: useEffect(() => { setTimeout(() => { document.getElementById('dlgbtn').onclick = () => { console.log('Dialog button clicked'); }; }); });
return ( <div className="control-pane"> <DialogComponent > <button id="dlgbtn">Click</button> </DialogComponent> </div> </div> ); } |
Sample: https://stackblitz.com/edit/react-ntrkyi-rx4bvn?file=index.js
Can you please check the above code snippet and the sample and let us know if it resolves your issues?
Regards,
Buvana S
Thank you for your solution.
Regards,
Hung
Welcome. Please let us know if you have any further assistance.
