Navigation becomes unresponsive after required error is corrected

[DanielDwyer]

I am reporting a bug discovered in "survey-vue": "^1.8.31" and "surveyjs-widgets": "^1.8.31".

The current behavior is:

After the required error state throws (when a user tries to proceed without answering a required question) and is corrected with the user answering that question, the survey navigation only allows the user to move forward one page and then becomes unresponsive and shows that the survey is in error state.

The expected behavior is:

I expect the survey navigation to remain responsive when a required error was thrown and corrected and the next page is navigated to.

To reproduce:

• navigate to a survey question with a required answer
• instead of providing the required answer, click next, causing the required error to throw
• now correctly answer the question
• click next to proceed to the next question
• provide a valid answer and try and proceed
• the navigation has become unresponsive, the survey shows in error state and will not proceed or go back

This resolves 100% when I revert my version back to 1.8.0

Test code

      s.data = this.surveyResult.result;
      s.css = surveyClassOverrides;
      s.showNavigationButtons = false;
      // update sortable widget to rank items within result box instead of dragging from source box
      s.getAllQuestions().forEach((question) => {
        const q = question;
        if (q.getType() === 'sortablelist') {
          q.value = q.choices.map((c) => c.value);
          q.isRequired = false;
        }
      });
      // Set survey variables
      forEach(this.surveyVariables, (value, key) => {
        s.setVariable(key, value);
      });
      s.onPartialSend.add(this.sendDataToServer);
      s.onComplete.add(this.completeSurvey);

      // if this.survey.config?.goNextPageAutomatic is true we want to add a delay between the automatic transitions
      let doDelay = this.survey.config.goNextPageAutomatic;
      s.onCurrentPageChanging
        /* eslint-disable no-param-reassign */
        .add((sender, options) => {
          if (!doDelay) return;
          options.allowChanging = false;
          setTimeout(() => {
            doDelay = false;
            sender.currentPage = options.newCurrentPage;
            /* eslint-enable no-param-reassign */
            doDelay = true;
          }, 500);
        });
      // ensure that the survey will not automatically be completed when user answers final question
      // allowCompleteSurveyAutomatic cannot be set in the JSON without making it serializable.
      // See https://github.com/surveyjs/survey-library/issues/2638 for more info from SurveyJS
      s.allowCompleteSurveyAutomatic = false;
      this.surveyModel = s;
      this.isSurveyComplete = false;
      if (s.currentPageNo === 0) {
        this.$emit('has-navigated-to-first-question', true);
      } else {
        this.$emit('has-navigated-to-first-question', false);
      }
      s.onCurrentPageChanged.add(this.handleNavigation);

Specify your

• browser: Chrome 89
• surveyjs platform: Vue
• surveyjs version: 1.8.31

[andrewtelnov]

@DanielDwyer There is an issue in the latest version, when you try to access survey.currentPage during rendering in the latest version in Vue. I tried several times to solve the issue, but I could not understand the reason of the issue.
You can try to use the latest version v1.8.37, I have fixed some cases, but I am afraid your case is not fixed. I will take a look at your example on this week.

Thank you,
Andrew

[andrewtelnov]

@DanielDwyer I did not check your particular case, but I believe it will work in v1.8.38.
I have fixed the issue with the current page and navigation by the commit above.

Thank you,
Andrew

[DanielDwyer]

Thanks for your hard work and great product - we really value it. I will keep an eye out for when v1.8.38 is released and test it and close this issue if all works as expected.