Search code examples
sapui5

sap.m.Wizard: nextStep not working correctly after discardProgress

I'm using SAPUI5 1.71.1

Context

I have an strange issue with the wizard control. When the user backs to a previous step and change a data that impacts the next steps, a discardProgress must be done. A working example is available in SAPUI5 Demo Kit: https://sapui5.hana.ondemand.com/1.71.1/#/entity/sap.m.Wizard/sample/sap.m.sample.WizardBranching

In the given example, if you go to step 3, then come back to step 2, and change the payment option, a popup appears and asks you to discard your progress. Then, the next button appears, and you can continue to step 3 again.

I wanted to avoid clicking on this next button, and automatically go to step 3 with method myWizard.nextStep().

setDiscardableProperty: function(params) {
  if (this._wizard.getProgressStep() !== params.discardStep) {
    MessageBox.warning(params.message, {
      actions: [MessageBox.Action.YES, MessageBox.Action.NO],
      onClose: function(oAction) {
        if (oAction === MessageBox.Action.YES) {
          this._wizard.discardProgress(params.discardStep);
          history[params.historyPath] = this.model.getProperty(params.modelPath);
          this._wizard.nextStep(); // not working properly
        } else {
          // ...
        }
      }.bind(this)
    });
  } else {
    // ...
  }
},

What is the problem?

Normally, when you click on the next step button, the scroll leads you to the next step and hides the previous one:

Result -> Normal behaviour

But when you use the method nextStep() right after calling discardProgress(), the previous step is not hidden anymore because no scroll is triggered:

Result -> What happend is not correct

I made a plunk to help you understand the problem, based on the sample provided by SAP: https://plnkr.co/edit/1fRmuXOI0m9VuDJq?open=lib%2Fscript.js&preview

Solution

  • Looks like a bug that could be fixed.* Until then, without changing much, simply calling the nextStep in the next browser event cycle (e.g. via setTimeout) will do the job for now.

    this._wizard.discardProgress(params.discardStep);
//...
setTimeout(() => this._wizard.nextStep()); // for UI5 1.73 and below

    * Update: the issue is no longer reproducible since UI5 1.74.0.