survey-vue: survey navigation becomes unresponsive if all survey fields are read-only

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug

What is the current behavior?

When a multi-page survey displays only pre-filled, read-only fields, navigation breaks and it is not possible to navigate away from the current survey page. The previous/next navigation buttons are not clickable.

What is the expected behavior?

Regardless of how the fields are filled (user input or pre-populated), it should be possible to complete the survey successfully. Buttons should not become disabled.

How would you reproduce the current behavior (if this is a bug)?

• Create a component like this one that will read a JSON configuration file, render the survey and pre-populate the fields and make them readOnly if a value is provided.
• Navigate the survey: after hitting the second page, it will be impossible to move forward or backward in the survey.

Provide the test code and the tested page URL (if applicable)

Vue Component Code: see here

Survey Configuration:

{
  "pages": [
    {
      "title": "Page1 - page {pageno} of {pagecount}.",
      "questions": [
        {
          "name": "regNumber",
          "type": "text",
          "title": "Registration Number:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly": true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "Type",
          "type": "text",
          "title": "Type:",
          "placeHolder": "",
          "defaultValue": "Default Type",
          "isRequired": true,
          "readOnly": true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "regName",
          "type": "text",
          "title": "Registration Name:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly": true,
          "requiredErrorText": "Required Field"
        }
      ]
    },
    {
      "title": "Page2 - page {pageno} of {pagecount}.",
      "questions": [
        {
          "name": "streetAddress",
          "type": "text",
          "title": "Street Address:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "city",
          "type": "text",
          "title": "City:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "province",
          "type": "text",
          "title": "Province:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "country",
          "type": "text",
          "title": "Country:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "postalCode",
          "type": "text",
          "title": "Postal Code:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        }
      ]
    },
    {
      "title": "Page3 - page {pageno} of {pagecount}.",
      "questions": [
        {
          "name": "instructions",
          "type": "text",
          "title": "Instructions:",
          "placeHolder": "",
          "defaultValue": "N.A.",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "otherInstructions",
          "type": "text",
          "title": "Other Instructions:",
          "placeHolder": "",
          "defaultValue": "N.A.",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        }
      ]
    },
    {
      "title": "Page4",
      "questions": [
        {
          "name": "nok_FullName",
          "type": "text",
          "title": "Next of Kin -  Full Name:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "nok_StreetAddress",
          "type": "text",
          "title": "Next of Kin - Street Address:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "nok_City",
          "type": "text",
          "title": "Next of Kin - City:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "nok_Province",
          "type": "text",
          "title": "Next of Kin - Province:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "nok_Country",
          "type": "text",
          "title": "Next of Kin - Country:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "nok_PostalCode",
          "type": "text",
          "title": "Next of Kin - Postal Code:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        }
      ]
    },
    {
      "title": "Page5 - page {pageno} of {pagecount}.",
      "questions": [
        {
          "name": "registrationDate",
          "type": "text",
          "title": "Registration Date:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        },
        {
          "name": "registrationExpiryDate",
          "type": "text",
          "title": "Registration Expiry Date:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "defaultValue": "N.A.",
          "requiredErrorText": "Required Field"
        },
        {
          "name": "issueDate",
          "type": "text",
          "title": "Issue Date:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "defaultValue": "N.A.",
          "requiredErrorText": "Required Field"
        },
        {
          "name": "expirationDate",
          "type": "text",
          "title": "Expiration Date:",
          "placeHolder": "",
          "isRequired": true,
          "readOnly" : true,
          "defaultValue": "N.A.",
          "requiredErrorText": "Required Field"
        },
        {
          "name": "status",
          "type": "text",
          "title": "Status:",
          "placeHolder": "",
          "defaultValue": "Ready",
          "isRequired": true,
          "readOnly" : true,
          "requiredErrorText": "Required Field"
        }
      ]
    }
  ]
}

Setting up the example completely is not 100% straightforward as this is used as part of a bigger set of applications that are inter-dependant. I tried reproducing the issue with a vanilla JS implementation and minimal survey on plunkr see here, however I am unable to trigger the issue there. The problem is, however, consistent in my Vue survey.

The Vue component linked above has all of the code responsible for rendering the survey, I’ll be happy to help setting up a more complex example if the component code + the configuration is not enough to reproduce and/or understand what the issue is.

Specify your

• browser: Firefox Developer Edition
• browser version: 87.0b9
• browser: Chrome
• browser version: 89.0.4389.90
• surveyjs platform (angular or react or jquery or knockout or vue): vue
• surveyjs version: survey-vue: ^1.8.26

[esune]

@andrewtelnov I’ll work on a setup either on Code SandBox or in a fork of my repo with all the code you need, I’ll post it here once ready.

[andrewtelnov]

@esune Great! I beleive the version we are going to release shortly v1.8.37 should not have a problem with duplicated symbols. I believe we fixed it in the current version v1.8.36, but I did not check it. Anyway, I believe we can close this issue.

Thank you, Andrew