Button component (onclick event) in dialog doesn't work in react v17

[Deysi Fortuna]

Hi, the button (onclick event) inside the dialog component doesn't work in react and react-dom v17, but when I downgraded to react v16, it worked. Do you know how to fix it so it can works in react v17? Thank you.

[Keerthana Rajendran]

Hi Deysi, 

 

Thanks for contacting Syncfusion support.  

 

Before we proceed further with your query, we would like to confirm whether the reported issue occurs with EJ1 or EJ2 React components.  

 

EJ1: http://reactjq.syncfusion.com/#app/button/default 

 

EJ2: https://ej2.syncfusion.com/react/demos/#/material/button/default 

 

Please share us the following details to assist you promptly. 

 

1. Exact Syncfusion version in which you get the reported issue.
2. Complete code block of Syncfusion component used in your application.
3. If possible, share us a simple issue replicating sample.

 

Regards, 

Keerthana.  

[Deysi Fortuna]

Hi, sorry for the late reply. I use syncfusion v19, and react v17 

and this is my code

import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";

import { DialogComponent } from "@syncfusion/ej2-react-popups";

import { ButtonComponent } from "@syncfusion/ej2-react-buttons";

import * as React from "react";

function App() {

  return (

    <div className="control-pane">

        

        <DialogComponent

          // ref={dialog => (this.dialogInstance = dialog)}

          visible={true}

          // close={this.dialogClose}

          showCloseIcon={true}

          isModal={true}

          width="70%"

          header="Dialog with Button"

          height="200px"

        >

          <div>

            <ButtonComponent

              id="btn"

              content="Button"

              onClick={()=>alert("test")}

            />

          </div>

        </DialogComponent>

      </div>

  );

}

export default App;

The button component doesn't work inside the dialog component. But if I change the react version to 16.9.0, it works. Thank you.

[Revanth Krishnan]

Hi Deysi, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Button component’s onclick doesn’t work when rendered inside the Dialog in the react version v17” 

 

The above issue can be resolved by rendering the content using the ‘content’ property of the Dialog. We have prepared a sample for your reference, 

 

Code Snippet: 

 

class Dialog extends Component { 

  constructor() { 

    super(...arguments); 

    this.clickEventHandler = this.clickEventHandler.bind(this); 

  } 

 

  content() { 

    return ( 

      <div className="dialogContent"> 

        <button onClick={this.clickEventHandler.bind(this)}> 

          Button 1 (pure JS) 

        </button>{" "} 

      </div> 

    ); 

  } 

  clickEventHandler() { 

    console.log("clickEventHandler called"); 

  } 

 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section" id="rteTools"> 

          <div className="rte-control-section" /> 

          <DialogComponent 

            visible={true} 

            showCloseIcon={true} 

            width="70%" 

            header="Dialog Header" 

            height="200px" 

            allowDragging={true} 

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

          /> 

        </div> 

      </div> 

    ); 

  } 

} 

 

Sample: https://stackblitz.com/edit/react-render-parent-component-o244eu?file=parent.js 

 

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

 

Regards, 

Revanth 

[Deysi Fortuna]

Hi, thanks for your reply. 

I used the content and got this error.

I got the same problem with this thread https://www.syncfusion.com/forums/165068/click-event-is-not-triggered-on-dialog

Thank you.

[Amos]

Following this thread too as it is similar to mine.

Syncfusion support: you can merge the 2 threads if you want so you won't need to duplicate your work and effort.

[Revanth Krishnan]

Hi Deysi, 

 

We are currently validating your query, we will update you with further details on or before 7^th May. 

 

We appreciate your patience till then. 

 

Regards, 

Revanth 

[Deysi Fortuna]

Hi.
Ok. Thanks for your reply.

[Deysi Fortuna]

Hi. 

I use the useState in React Hook but it renders the dialog component first before return a state value and got that error. Maybe the problem is the order in which React components are rendered first.

[Revanth Krishnan]

Hi Deysi, 

 

As mentioned earlier we will check and update you with further details on or before 7^th May. 

 

Meanwhile can you please try to render the dialog component after the state value is returned by using a condition. 

 

Regards, 

Revanth 

[Maxwell]

This problem is caused by changes in event delegation(React 17) - https://reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation

I solved this with Portals(https://reactjs.org/docs/portals.html) i.e.

const ModalPortal = props => {
  const modalRoot = document.createElement('div');
  modalRoot.setAttribute('uk-modal', 'bg-close: false');
  modalRoot.id = 'modal-save';

  useEffect(() => {
    document.body.appendChild(modalRoot);
    return () => {
      document.body.removeChild(modalRoot);
    }
  });

  return ReactDOM.createPortal(props.children, modalRoot);
} 

export default ModalPortal;

Then you should wrap modal content in the parent element (React Course Button)

<ModalPortal>
  // modal body
  <span onClick={() => console.log('test')}>Test</span>
</ModalPortal>

[Revanth Krishnan]

Hi Maxell, 

 

Thanks for the update. 

 

We are glad that you found solution for the click event using portals. 

 

Regards, 

Revanth 

[Revanth Krishnan]

Hi Deysi,  

  

Good day to you. 

 

We have further validated your query and we have considered “When the content is given as a template function, then the content is not rendered in the Dialog” as a bug from our end and logged the report for the same and it will be included in the coming 2021 Volume 1 SP release which is scheduled to be released by the mid of May.  

    

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/25059 

   

Regards,   

Revanth 

[Revanth Krishnan]

Hi Deysi, 

 

 

Thanks for the patience. 

 

 

We have included the fix for “When the content is given as a template function, then the content is not rendered in the Dialog” with the package version 19.1.63.    

Can you please upgrade your package to this version to resolve the issue on your end?  

  

Release Note: https://ej2.syncfusion.com/angular/documentation/release-notes/19.1.63/?type=all#dialog 

 

Regards,  

Revanth