Click event is not triggered on dialog

[Amos]

Hi

I saw the following thread

https://www.syncfusion.com/forums/150748/dialog-button-in-dialog-does-not-fire-onclick-event-anymore

and I encounter the same problem with React17/sf-popups19.1.57. I didn't try your componentDidMount solution because I'm using hooks and even if it will work with hooks, it won't be a proper/clean solution.

Please advice

[Revanth Krishnan]

Hi Amos, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I encountered the click event not triggered a problem with react v17. I didn't try your ‘componentDidMount’ solution because I'm using hooks and even if it will work with hooks, it won't be a proper/clean solution.” 

 

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 

[Amos]

I did the following

<DialogInteraction header={props.symbol} okClick={okClick}
                   closeClick={props.closeClick} visible={props.visible} forceWidth="300px" content={content}/>

<DialogComponent width={isMobile ? "98%" : props.forceWidth ? props.forceWidth : "50%"} isModal={true}
                 header={props.header} position={position} buttons={bothButtons}
                 showCloseIcon={false} visible={props.visible} content={props.content} />

const content = () => {
    return (
            <div className="temp">
            </div>
    )
}

In real life, content has much more tags inside but for simplicity I tried with the above only and still it seems to fail.
Notice that content is assigned to content of DialogInteraction which in turn is assigned to content of DialogComponent.

The above error appears before something is rendered (it's a dialog which is invisible at first).
If I remove content={content} of DialogComponent, the window shows itself but obviously empty.

Notice that I'm using hooks and 16.8.0 coding style of React.

[Amos]

DialogInteraction is a component with its own file and it has the DialogComponent inside it.

DialogInteraction component is called from another file which is showing several components and the dialog is one of them (hidden at first and is shown only when needed)

A small correction: when I remove content={props.content} from DialogComponent, then everything works. Something in the way I'm passing the content, breaks React. Any idea what can it be?

[Amos]

From debugging, the failure comes from here

  974 |     this.contentEle.innerHTML = '';
  975 | }
  976 | // eslint-disable-next-line
> 977 | typeof (this.content) === 'string' ? (this.isBlazorServerRender()
      | ^  978 |     && (this.contentEle.innerText === '')) ?
  979 |     this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) :
  980 |     this.updateSanitizeContent() :

this.content is a function, not a string. Maybe it can give a hint.
I did try to replicate it using your sample (using oldschool react coding style) but it works, so I wonder what am I doing wrong.

[Amos]

I even tried the simplest code on the same file where DialogComponent resides

function content1() {
    return (
        <div>
            blah blah
        </div>
    )
}

return (

    <DialogComponent width={isMobile ? "98%" : props.forceWidth ? props.forceWidth : "50%"} isModal={true}
                     header={props.header} position={position} buttons={bothButtons}
                     showCloseIcon={false} visible={props.visible} content={content1} />
);

still the same error, it doesn't like something in the way the content is passed and I get 
Node.appendChild: Argument 1 does not implement interface Node.

[Revanth Krishnan]

Hi Amos,  

  

We have created a new incident under your Direct-Trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   

  

https://www.syncfusion.com/account/login 

  

Regards,  

Revanth 

[ONG YU FENG]

Hi there

I am encountering exact issue as the OP. Could Syncfusion post possible solution to this issue? It would be good if the solution is written based on function component style

Thanks!

[Vinitha Jeyakumar]

Hi Ong, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “I am encountering exact issue as the OP. Could Syncfusion post possible solution to this issue?” 

 

The reported issue was resolved and included in the version 19.1.63. To resolve the issue from your end, please upgrade the package to 19.1.63 or latest. 

 

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

 

Regards, 

Vinitha