This is a issue that recently started to happen. I have SPFx extension which uses custom dialog. When user clicks on button, I have dialog box that opens up with table and a close button which user can use to close the dialogue box.

But I am suddenly seeing an issue where if I click on the button to open the dialogue box again, I will see the same table twice and the okay button twice as well. Everything was working fine up-to now so I am not sure why I am suddenly seeing this behavior. If I refresh the SharePoint page and click on the button, it will open just 1 table and 1 okay button so it seems like when I close the dialog box it is still holding on to the information rendered before and displays it again.

What would be the best way to deal with this?

I have tried searching for way to clear the dialog box before I render the table but I can't find anything on it. Any idea would be greatly appreciated. I am following this tutorial https://www.c-sharpcorner.com/article/spfx-creating-custom-dialog-boxes-without-a-javascript-framework. I have changed the onExecute to the following:

public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
      switch (event.itemId) {  
        case 'COMMAND_1':  
                const dialog: CustomDialog = new CustomDialog();  
                dialog.itemUrlFromExtension = event.selectedRows[0].getValueByName("FileRef");  
                dialog.otherParam = "This is parameter passed from Extension"  

        case 'COMMAND_2':  
          throw new Error('Unknown command');  

enter image description here

  • could you share your code here? It's hard to guess why this is occurring without seeing how you implemented it. Commented Oct 20, 2021 at 18:39
  • Are you passing dynamic content to the dialog box? If yes, clear the dynamic information state property on close of dialog & again set new value to the state property on click of button (to open dialog again). Commented Oct 21, 2021 at 6:24
  • @DenisMolodtsov I have added the tutorial I am following as well as the code changed I made to get the error
    – hellothere
    Commented Oct 25, 2021 at 12:09
  • @GaneshSanap I have added more details to the post
    – hellothere
    Commented Oct 25, 2021 at 12:13
  • Did you miss var html:string = ""; line at the start of render() function? Commented Oct 25, 2021 at 13:37

2 Answers 2


Dialog box is showing old content/table again because you are "concatenating" the new content to previous content using:

this.domElement.innerHTML += html;

Instead of +=, use = like given in below code:

this.domElement.innerHTML = html;

This is an easier way than setting the innerHTML twice in render method.

  • 1
    I prefer this solution more. Thanks, Ganesh.
    – hellothere
    Commented Oct 27, 2021 at 19:01

To anyone facing similar issue- adding this.domElement.innerHTML = ""; in render() function fixed the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.