Prevent Dialog from closing after pressing OK - SPFX Extension Listview Command

Question

I created a spfx extension that shows a dialog using

 Dialog.alert(`Are you sure you want to open Quarter ${selectedItem.Quarter} for Period ${selectedItem.Period}?`).then(() => {
      this.updateSelectedItem(selectedItem);
    });

then updates selected item if the user press Ok. Its working but, even if i dont click OK and just click outside the dialog, it will still update the selected item.

How can i add cancel button?

Also i want to display a spinner inside the dialog when the user press OK. Is it possible?

Answer 1

By writing Dialog.alert(message).then(/*stuff*/), you are saying that you want Dialog to alert, then always run the /*stuff*/ after the dialog closes, regardless of the way it closes. This leads to the behavior you observe.

To your first question, I would hazard a guess that there's a similar method Dialog.confirm(message).then(/*stuff*/), which would prompt the user for a "OK" or "Cancel" response, then runs /*stuff*/ conditionally only if the user selected "OK". However, I'm not sure what Dialog API you're using, so I recommend you review the documentation for that component/library for details.

In the worst case, you could create an event listener on the OK button which sets a boolean (ex. userClickedOk) to true when the user clicks OK, so the code could look like this:

Dialog.alert(`Are you sure you want to...?`).then(() => {
    if (userClickedOk) {
        this.updateSelectedItem(selectedItem);
    }
});

To your second question, you'll need to provide more details about the library you're using. It's certainly possible - with vanilla JavaScript, you could attach an event listener to the "OK" button, which then attaches some spinner HTML to the dialog. But there might be a better/easier way provided through the API.