1. Home
  2. Forum
  3. Blazor
  4. Dialog button in dialog does not fire OnClick event anymore.

Dialog button in dialog does not fire OnClick event anymore.

On  version  v17.4.43  looks like buttons  in  Dialog does not fire events on click
This was working in version V17.4.40 Now I do not get fire event on click of buuton
Is there something new I realy did not get breaking changes for dialog or digalog buttons


@using Microsoft.AspNetCore.Hosting

@using Syncfusion.EJ2.Blazor.Popups;
@using Syncfusion.EJ2.Blazor.Buttons;
@using System.IO;
@inject IWebHostEnvironment hostingEnv;



<div class="@CssKlasa">
    <button class="e-btn" @onclick="@OnBtnClick">Isprazni folder</button>
    <EjsDialog @ref="DialogObj" Width="335px" Visible="false" CloseOnEscape="true" IsModal="true">
        <DialogTemplates>
            <Header>Da li ste siguni da želite isprazniti CDR folder   </Header>
            <Content> <p>U folderu sam našao @datoteka datoteka</p><br /><p style="white-space: pre-line">@greska</p> </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton ButtonModel="@DialogBtnOk" OnClick="DialogBtnOkClicked"></DialogButton>
            <DialogButton ButtonModel="@DialogBtnJok" OnClick="DialogBtnJokClicked"></DialogButton>
        </DialogButtons>

        <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>
        <DialogEvents OnOpen="OnOpen"></DialogEvents>
    </EjsDialog>
</div>
@code {

    [Parameter]
    public string CssKlasa { get; set; }

    [Parameter]
    public EventCallback<bool> ObrisaoSamContentFoldera { get; set; }

    string greska = string.Empty;

    EjsDialog DialogObj;

    private ButtonModel DialogBtnOk = new ButtonModel
    {
        Content = "Obriši",
        IsPrimary = true,
        IconCss = "far fa-trash-alt"
    };
    private ButtonModel DialogBtnJok = new ButtonModel
    {
        Content = "Zatvori",

    };
    long datoteka = 0;
    private void OnBtnClick()
    {
        this.DialogObj.Show();
    }
    private void DialogBtnOkClicked()
    {
        try
        {
            System.IO.DirectoryInfo di = new DirectoryInfo(System.IO.Path.Combine(hostingEnv.ContentRootPath, "par"));

            foreach (System.IO.FileInfo file in di.GetFiles())
            {
                file.Delete();
            }
            ObrisaoSamContentFoldera.InvokeAsync(true);
            this.DialogObj.Hide();
        }
        catch (Exception ex)
        {
            greska = $"Nisam uspijeo obrisati daoteke sa greškom{ex.Message}";
        }
    }
    private void DialogBtnJokClicked()
    {
        this.DialogObj.Hide();
    }
    private void ObrisiFolderClicked()
    {
        this.DialogObj.Show();
    }
    private void OnOpen()
    {


        this.datoteka = Directory.GetFiles(System.IO.Path.Combine(hostingEnv.ContentRootPath, "par"), "*.*").Length;
    }

}


16 Replies
JA James January 20, 2020 04:03 AM UTC

I have the same issue.

AH Admir Hodžic January 20, 2020 07:33 AM UTC

My project is on v3.1.1 ov Microsoft nuggets.
Is yours also on 3.1.1, maybe new update of Microsoft tools brake this functionality  

IS Indrajith Srinivasan Syncfusion Team January 20, 2020 12:37 PM UTC

Hi Admir, 
  
Currently, we validating the reported issue, will update further details shortly.  
  
Regards,
Indrajith 


IS Indrajith Srinivasan Syncfusion Team January 20, 2020 05:21 PM UTC

Hi Admir,

Greetings from Syncfusion support 
 
We suspect this to be a defect from our end, we will include this fix in our next nuget release until then can you use the below nuget package to resolve the issue in your end.

Sample: https://www.syncfusion.com/downloads/support/forum/150748/ze/BlazorDialog-2061670139

Nuget package: https://www.syncfusion.com/downloads/support/forum/150748/ze/Syncfusion.EJ2.Blazor.17.4.0.46-1062011802

Can you please try out the above solution and let us know if you face any difficulties. 
 
Regards, 
Indrajith 


LS Laurin S November 15, 2020 04:14 PM UTC

Hi, I have the same issue but in React. I also have a Dialog and inside the Dialog a Button. The button is not firing the onClick Event. 

    <DialogComponent
      ref={dialogRef}
      allowDragging={true}
      closeOnEscape={false}
      showCloseIcon={true}
      header={header}
      visible={false}
      width="350px"
    >
        <div>
            <ButtonComponent onClick={start}>Start</ButtonComponent>
        </div>
    </DialogComponent>

IS Indrajith Srinivasan Syncfusion Team November 16, 2020 07:48 AM UTC

Hi Laurin, 
 
Good day to you, 
 
We have validated your reported query. We have tried to reproduce the reported issue using the shared code blocks, unfortunately we couldn’t find any issues from our end. We have also shared the ensured sample from our end 
 
 
If possible, can you replicate the issue in the above sample and revert back to us ?.  So that we can validate and provide solution at earliest. 
 
Regards, 
Indrajith 


LS Laurin S November 16, 2020 04:48 PM UTC

Hey, thanks for the quick reply. Unfortunately, in my piece of code the button onClick event is not working. If could check my attached file, thank you very much.
Also, the useState variables/methods are not really working as expected (in the attached file). Maybe, this misbehavior is somehow correlated... Or there is an error on my side... I don't know, just wanted to add this.

Attachment: DStopWatch_35d8f69a.zip

IS Indrajith Srinivasan Syncfusion Team November 17, 2020 12:52 PM UTC

Hi laurin, 
 
Good day to you, 
 
We have checked the shared attachment. We couldn’t make an runnable sample using the share attachments. We have also checked the reported issue by configuring the way you have used the dialog in your application. Can you share us the following details ? 
 
  • Is the button click action, working for an normal JavaScript button ?
  • Can you try using the shared sample code blocks, in your application and check the reported issue ?
 
If possible can you replicate the issue in the already shared sample and revert back to us ? 
 
Regards, 
Indrajith 


LS Laurin S November 17, 2020 04:00 PM UTC

Hi,
below the answers:

  • Is the button click action, working for an normal JavaScript button ? No (see attached code)
  • Can you try using the shared sample code blocks, in your application and check the reported issue ? Not working, see attached code
I prepared a new example project, where the button click events are not fired.
In addition, I discovered that the header template of the Dialog does not update/re-render when a state variable changes (see attached code with the example of the "this.state.title" variable).

Attachment: exampleapp_ea5d6be1.zip

IS Indrajith Srinivasan Syncfusion Team November 18, 2020 11:21 AM UTC

Hi Laurin, 
 
We have checked the shared sample and faced the below error while running the sample. We have also prepared a sample, using the shared code blocks and the click action works fine for both the buttons. The header template is not updated, since its value is not passed directly to the header property(header={this.state.title}). Check the below stackblitz sample prepared using the shared code blocks for reference. 
 
Facing below error when running the shared sample: 
 
 
 
 
Please check the above sample and let us know if it meets your requirements? 
 
Regards, 
Indrajith 


DF Deysi Fortuna April 30, 2021 02:57 AM UTC

Hi, I have the same issue, 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. Can you fix it so it can works in react v17? Thank you.

RK Revanth Krishnan Syncfusion Team May 1, 2021 06:12 AM UTC

Hi Deysi, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query, can this issue can be resolved by binding the events in the ‘componentDidMount’ method of the react, where the events will be bound properly. We have prepared a sample for your reference, 
 
Code Snippet: 
 
class Dialog extends Component { 
    constructor() { 
      super(...arguments); 
    } 
    componentDidMount() { 
      setTimeout(() => { 
        document.getElementById("dlgbtn").onclick = () => { 
          console.log("Dialog button clicked"); 
        }; 
      }); 
    } 
   
    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} 
            > 
              <div> 
                <p>Dialog Button</p> 
                 <button id="dlgbtn">Button 1</button> 
              </div> 
            </DialogComponent> 
          </div> 
        </div> 
      ); 
    } 
  } 
 
 
Can you please check the above code snippet and the sample and let us know if it resolves your issue. 
 
Regards, 
Revanth 


SK Satheesh Kumar replied to Indrajith Srinivasan June 5, 2021 11:45 AM UTC

Hi Laurin, 
 
Good day to you, 
 
We have validated your reported query. We have tried to reproduce the reported issue using the shared code blocks, unfortunately we couldn’t find any issues from our end. We have also shared the ensured sample from our end 
 
 
If possible, can you replicate the issue in the above sample and revert back to us ?.  So that we can validate and provide solution at earliest. 
 
Regards, 
Indrajith 


Hi

The same example does not work when I update the package to latest version 19.1.

"dependencies": {
    "@syncfusion/ej2-buttons": "19.1.63",
    "@syncfusion/ej2-react-buttons": "19.1.63",
    "@syncfusion/ej2-react-inputs": "19.1.66",
    "@syncfusion/ej2-react-popups": "19.1.66",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

Please refer the link 

Also if I use submit button the page gets refreshed. Please refer the above link for both issues.

Is there any breaking changes that I missed?

RK Revanth Krishnan Syncfusion Team June 7, 2021 12:04 PM UTC

Hi Satheesh, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your queries, 
 
Query 1: “The same example does not work when I update the package to the latest version 19.1.” 
 
We have analyzed the shared sample and this issue occurs because the react is updated to version “17”, where the button click doesn’t work. This can be resolved by rendering the content using the content property of the dialog. We have modified the shared sample for your reference, 
 
Code Snippet: 
export class Default extends React.PureComponent { 
  . . .  
  content() { 
    return ( 
      <div> 
        <form> 
          <ButtonComponent 
            id="btn" 
            content="Button" 
            type="button" 
            onClick={this.clickEventHandler} 
          /> 
          <ButtonComponent 
            id="btn" 
            type="button" 
            content="Submit" 
            onClick={this.onSubmit} 
          /> 
        </form> 
      </div> 
    ); 
  } 
  . . . 
  clickEventHandler() { 
    console.log('click called'); 
  } 
  onSubmit() { 
    console.log('Submit clicked'); 
  } 
 
  render() { 
    return ( 
      <div className="control-pane"> 
        <button 
          className="e-control e-btn" 
          id="targetButton1" 
          role="button" 
          onClick={(this.handleClick = this.handleClick.bind(this))} 
        > 
          Open 
        </button> 
        <DialogComponent 
          ref={dialog => (this.dialogInstance = dialog)} 
          visible={this.state.hideDialog} 
          close={this.dialogClose} 
          showCloseIcon={true} 
          isModal={true} 
          width="70%" 
          header="Dialog with Button" 
          height="200px" 
          content={this.content.bind(this)} 
          buttons={this.buttons(this.isSubmitting, this.submitForm)} 
        /> 
      </div> 
    ); 
  } 
} 
 
 
Query 2: “Also if I use submit button the page gets refreshed”. 
 
This issue occurred because the submit button is used inside the form and the page will be refreshed if the button is clicked, this can be resolved by making the ‘type‘ to ‘button’ and using the ‘onClick’ event to handle the submit. We have modified the shared sample for your reference, 
 
Code Snippet: 
export class Default extends React.PureComponent { 
  . . .  
  content() { 
    return ( 
      <div> 
        <form> 
          <ButtonComponent 
            id="btn" 
            content="Button" 
            type="button" 
            onClick={this.clickEventHandler} 
          /> 
          <ButtonComponent 
            id="btn" 
            type="button" 
            content="Submit" 
            onClick={this.onSubmit} 
          /> 
        </form> 
      </div> 
    ); 
  } 
  . . . 
  clickEventHandler() { 
    console.log('click called'); 
  } 
  onSubmit() { 
    console.log('Submit clicked'); 
  } 
 
  render() { 
    return ( 
      <div className="control-pane"> 
        <button 
          className="e-control e-btn" 
          id="targetButton1" 
          role="button" 
          onClick={(this.handleClick = this.handleClick.bind(this))} 
        > 
          Open 
        </button> 
        <DialogComponent 
          ref={dialog => (this.dialogInstance = dialog)} 
          visible={this.state.hideDialog} 
          close={this.dialogClose} 
          showCloseIcon={true} 
          isModal={true} 
          width="70%" 
          header="Dialog with Button" 
          height="200px" 
          content={this.content.bind(this)} 
          buttons={this.buttons(this.isSubmitting, this.submitForm)} 
        /> 
      </div> 
    ); 
  } 
} 
 
 
Please check the above code snippets and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 


SK Satheesh Kumar replied to Revanth Krishnan June 8, 2021 11:38 AM UTC

Hi Satheesh, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your queries, 
 
Query 1: “The same example does not work when I update the package to the latest version 19.1.” 
 
We have analyzed the shared sample and this issue occurs because the react is updated to version “17”, where the button click doesn’t work. This can be resolved by rendering the content using the content property of the dialog. We have modified the shared sample for your reference, 
 
Code Snippet: 
export class Default extends React.PureComponent { 
  . . .  
  content() { 
    return ( 
      <div> 
        <form> 
          <ButtonComponent 
            id="btn" 
            content="Button" 
            type="button" 
            onClick={this.clickEventHandler} 
          /> 
          <ButtonComponent 
            id="btn" 
            type="button" 
            content="Submit" 
            onClick={this.onSubmit} 
          /> 
        </form> 
      </div> 
    ); 
  } 
  . . . 
  clickEventHandler() { 
    console.log('click called'); 
  } 
  onSubmit() { 
    console.log('Submit clicked'); 
  } 
 
  render() { 
    return ( 
      <div className="control-pane"> 
        <button 
          className="e-control e-btn" 
          id="targetButton1" 
          role="button" 
          onClick={(this.handleClick = this.handleClick.bind(this))} 
        > 
          Open 
        </button> 
        <DialogComponent 
          ref={dialog => (this.dialogInstance = dialog)} 
          visible={this.state.hideDialog} 
          close={this.dialogClose} 
          showCloseIcon={true} 
          isModal={true} 
          width="70%" 
          header="Dialog with Button" 
          height="200px" 
          content={this.content.bind(this)} 
          buttons={this.buttons(this.isSubmitting, this.submitForm)} 
        /> 
      </div> 
    ); 
  } 
} 
 
 
Query 2: “Also if I use submit button the page gets refreshed”. 
 
This issue occurred because the submit button is used inside the form and the page will be refreshed if the button is clicked, this can be resolved by making the ‘type‘ to ‘button’ and using the ‘onClick’ event to handle the submit. We have modified the shared sample for your reference, 
 
Code Snippet: 
export class Default extends React.PureComponent { 
  . . .  
  content() { 
    return ( 
      <div> 
        <form> 
          <ButtonComponent 
            id="btn" 
            content="Button" 
            type="button" 
            onClick={this.clickEventHandler} 
          /> 
          <ButtonComponent 
            id="btn" 
            type="button" 
            content="Submit" 
            onClick={this.onSubmit} 
          /> 
        </form> 
      </div> 
    ); 
  } 
  . . . 
  clickEventHandler() { 
    console.log('click called'); 
  } 
  onSubmit() { 
    console.log('Submit clicked'); 
  } 
 
  render() { 
    return ( 
      <div className="control-pane"> 
        <button 
          className="e-control e-btn" 
          id="targetButton1" 
          role="button" 
          onClick={(this.handleClick = this.handleClick.bind(this))} 
        > 
          Open 
        </button> 
        <DialogComponent 
          ref={dialog => (this.dialogInstance = dialog)} 
          visible={this.state.hideDialog} 
          close={this.dialogClose} 
          showCloseIcon={true} 
          isModal={true} 
          width="70%" 
          header="Dialog with Button" 
          height="200px" 
          content={this.content.bind(this)} 
          buttons={this.buttons(this.isSubmitting, this.submitForm)} 
        /> 
      </div> 
    ); 
  } 
} 
 
 
Please check the above code snippets and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 


Thanks for your reply. It helped me partially. So do you mean to say I cannot update react to latest to use with syncfusion components? Because I have so many files to change to fit in. Also I have a scenario where I want to use dropdownbutton component and I have a click event for each and every items in target. I am not able to achieve that too (react-rcdarc-ghr3a5 - StackBlitz). 

Help me on how to use latest versions for both react and syncfusion.

Thanks for your reply in advance.

RK Revanth Krishnan Syncfusion Team June 9, 2021 07:39 AM UTC

Hi Satheesh, 
 
 
Good day to you. 
 
 
We have further validated your queries, 
 
Query 1: “Do you mean to say I cannot update react to latest to use with syncfusion components.” 
 
The react can be updated to the lasted version(17), but the content of the dialog needs to be given in the content property instead of directly defining it inside the dialog component to make the click event work. 
 
This issue occurs because of the breaking changes (Changes to Event Delegation) in the react version 17. Please check the below link for reference, 
 
Query 2: “I have a scenario where I want to use the dropdown button component and I have a click event for each and every item in the target. I am not able to achieve that too” 
 
We have analyzed the shared sample and we tried to reproduce the issue, but we couldn’t reproduce the issue and the click event of the items in the dropdown button works properly. We have prepared a video for your reference, 
 
 
Please check the above reference link and video and let us know if you need further assistance. 
 
Regards, 
Revanth 


Loader.
Up arrow icon