Click event not working for buttons inside Dialog component placed within Tab component

[Goutham]

When I use a DialogComponent inside a TabComponent, the buttons within the dialog are not triggering their click events.

You can check the example here:
https://stackblitz.com/edit/react-8pocqskn?file=index.js

In this example, I have placed a DialogComponent inside the tab content, and within the dialog content, I have added a button with an onClick event that logs a message to the console. However, the click event is not firing as expected.

Could you please check and let me know if I’m missing something or if this is a known issue?

[LeoLavanya Dhanaraj]

Hi Goutham,

Greetings from Syncfusion support.

In the latest versions of React (v18+), event delegation behavior has changed, especially when components are rendered outside the main React tree using portals. When a DialogComponent is rendered inside a TabComponent, and the dialog is internally moved to document.body (as Syncfusion does by default), the onClick events may not propagate correctly unless the dialog is rendered within the same React tree. This issue is not present in earlier React versions (like v16).

To ensure the onClick events work as expected, you should explicitly render the DialogComponent using ReactDOM.createPortal into document.body. This ensures React can properly manage event propagation even when the dialog is outside the tab's DOM hierarchy.

Sample : https://stackblitz.com/edit/react-8pocqskn-n4zrefql?file=index.js

[index.js]  
import ReactDOM from 'react-dom';
return (

      <div>

        <button

          className="e-control e-btn dlgbtn"

          onClick={buttonClick}

          id="dialogBtn"

        >

          Open

        </button>

        {ReactDOM.createPortal(

        <DialogComponent

          id="defaultdialog"

          showCloseIcon={true}

          animationSettings={animationSettings}

          width="500px"

          header="About SYNCFUSION Succinctly Series"

          visible={status}

          buttons={buttons}

          open={dialogOpen}

          close={dialogClose}

        >

          <div>

            <button

              onClick={() => {

                console.log('hel');

              }}

            >

              click Button

            </button>

            <div>

              In the Succinctly series, Syncfusion created a robust free library

              of more than 130 technical e-books formatted for PDF, Kindle, and

              EPUB.

              <br />

              <br />

              The Succinctly series was born in 2012 out of a desire to provide

              concise technical e-books for software developers Each title in

              the Succinctly series is written by a carefully chosen expert and

              provides essential content in about 100 pages.

            </div>

          </div>

        </DialogComponent>,

        document.body

      )}

This approach ensures the dialog is rendered outside the tab's DOM structure but still within the React tree.

Regards,

Leo Lavanya Dhanaraj