event handlers are not attaching to button which is mentioned in content of dialog.

[Darek Johnson]

Hi,

I am using dialog as every thing is content i.e included form,header ,footer buttons separately in content itself with out using dialog header,footerTemplate props like below
https://stackblitz.com/edit/react-3hfhfs?file=index.js

1.Form submit triggering whole page refresh

2.button onClick event handler not attached.

Could you please resolved this issue.

[Revanth Krishnan]

Hi Darek, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your queries when using dialog as everything is content i.e. included form, header, footer buttons separately in the content itself without using dialog header, footer template props 

 

Query 1: “Button onClick event handler not attached.” 

 

We have analyzed the shared sample and the issue occurred because the ‘onChange’ event was bound instead of ‘onClick’ event in the button. This can be resolved by binding the ‘onClick’ event. We have modified the shared sample for your reference, 

 

Code Snippet: 

 

<DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} 

    visible={this.state.hideDialog} width={'500px'} ref={dialog=> (this.dialogInstance = dialog)} 

    target={'#targetElement'} 

    header="About SYNCFUSION Succinctly Series" 

    buttons={this.buttons} 

    open={this.dialogOpen.bind(this)} 

    close={this.dialogClose.bind(this)} 

    > 

    <form onSubmit={this.submitHandler}> 

        . . . 

        <ButtonComponent content="Cancel" className="e-secondary cancel-btn" type="button" 

            onClick={this.cancelBtnHandler.bind(this)} /> 

        . . . 

    </form> 

</DialogComponent> 

Note: Use the ‘onClick’ event instead of the ‘onChange’ event in the button. 

 

Sample: https://stackblitz.com/edit/react-3hfhfs-lkhsn7?file=index.js 

 

Query 2: “Form submit triggers the whole page refresh.” 

 

We are able to reproduce the issue in the shared sample and the issue occurred because the button’s ‘type’ was configured as ‘submit’ which by default refresh the whole page. This can be resolved by configuring the button’s ‘type’ as ‘button’ and then using the ‘onClick’ event of the button to handle the submit action(method). We have modified the shared sample for your reference, 

 

Code Snippet: 

 

<DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} 

    visible={this.state.hideDialog} width={'500px'} ref={dialog=> (this.dialogInstance = dialog)} 

    target={'#targetElement'} 

    header="About SYNCFUSION Succinctly Series" 

    buttons={this.buttons} 

    open={this.dialogOpen.bind(this)} 

    close={this.dialogClose.bind(this)} 

    > 

    <form onSubmit={this.submitHandler}> 

        <div> 

        . . . 

        <ButtonComponent content="Save" className="e-secondary cancel-btn" type="button" 

            onClick={this.submitHandler.bind(this)} /> 

    </form> 

</DialogComponent> 

 

Sample: https://stackblitz.com/edit/react-3hfhfs-dyunrt?file=index.js 

 

Please check the above code snippets and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth 

[Darek Johnson]

Hi,

But in functional component its not working please check below code,I am not able add handler for button
https://codesandbox.io/s/pensive-cache-4qdwg?file=/src/App.js

[Revanth Krishnan]

Hi Darek, 

 

 

Good day to you. 

 

 

We have validated your query “In functional component this click event is not working please check below code, I am not able to add the handler for the button”. 

 

We have analyzed the shared sample and we are able to reproduce the reported issue, this issue can be resolved by rendering the content(button) using the ‘content’ property of the Dialog. We have modified the shared sample for your reference, 

 

Code Snippet: 

 

export default function App() { 

  this.content = () => { 

    return ( 

      <div className="dialogContent"> 

        <button onClick={clickHandler.bind(this)}>click</button> 

      </div> 

    ); 

  }; 

  const clickHandler = () => { 

    console.log("hello"); 

  }; 

  return ( 

    <div> 

      <DialogComponent 

        width="250px" 

        visible={true} 

        content={this.content.bind(this)} 

      ></DialogComponent> 

    </div> 

  ); 

} 

 

 

Sample: https://codesandbox.io/s/gallant-wozniak-i29co?file=/src/App.js 

 

Please check the above code snippet and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth 

[Matt Hoskins]

Hi Darek,

I bumped into issue 2 myself - and I saw that SF's answer from Revanth was to use the content property instead of having components as children of DialogComponent, but I found that doing that can have its own issues (due to the order stuff gets rendered).

There's actually a simpler answer which is to just set a target on the DialogComponent that's either targetting your app root or some other element below it (rather than one outside the app, which the default of the body element is).

I forked the earlier code snippet that wasn't working and set a target property of the app root and it now works without needing to change to using the content property:

https://codesandbox.io/s/determined-dust-jgzymp?file=/src/App.js

I think the original issue is a consequence of how React does click event handling (it binds a noop function to the element and then catches the click event higher up the dom tree).

I've raised a bug report with SF about this behaviour with the DialogComponent as I think at the very least the documentation for the DialogComponent should warn that not setting the target can have consequences for click handlers!

https://www.syncfusion.com/feedback/46657/onclick-events-dont-work-on-child-components-if-dialog-has-no-target-set

[Kokila Poovendran]

Hi Matt,

We truly appreciate your feedback and apologize for any inconvenience you may have faced with our documentation.

Thank you for taking the time to create feedback about the issue you encountered. Your suggestion regarding the use of the target property on the DialogComponent is indeed valuable. It's great to see that you found a simpler solution to the problem and shared it with us. We've taken note of your feedback and will incorporate it into our documentation to ensure that other users are aware of this potential issue with click event handling. We will prioritize this update and make sure our documentation reflects this information promptly.

Thank you once again for your time and valuable insights.

Regards,

Kokila Poovendran