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"
dialog.show()
break;
case 'COMMAND_2':
Dialog.alert(`${this.properties.sampleTextTwo}`);
break;
default:
throw new Error('Unknown command');
}
}
}
var html:string = "";
line at the start ofrender()
function?