Question T17100
Visible to All Users

Issue with SurveyJS conditional display of questions

created a year ago

Hi there,
I have created a CodeSandbox to demo this issue: Link to Code Sandbox
Here are the steps to reproduce:

  1. Select "Yes" on Question1
  2. Notice that Question2 appears.
  3. Select "Yes" on Question2.
  4. Notice that Question3 appears.
  5. Now, change the response for Question1 to "No"
  6. Notice that Question3 should have disappeared. However, it does not.

Can you please help with this? Is there a workaround to this issue?

Answers approved by surveyjs Support

created a year ago

Hello Shashi,
Question 3 doesn't disappear because Question 2 persists its value even when it is hidden. If you wish to hide Question 3 when Question 2 disappears, set the survey.clearInvisibleValues property to "onHidden".

Consider the updated survey JSON:

JSON
{ title: "NPS Survey Question", completedHtml: "<h3>Thank you for your feedback</h3>", clearInvisibleValues: "onHidden", completedHtmlOnCondition: [ { html: "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>", }, { html: "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>", }, ], pages: [ { name: "page1", elements: [ { type: "radiogroup", name: "question1", title: "This is Question1. Selecting Yes will open Question 2", choices: [ { value: "Item 1", text: "Yes", }, { value: "Item 2", text: "No", }, ], }, { type: "radiogroup", name: "question2", visibleIf: "{question1} = 'Item 1'", title: "Question 2 opens if Question1 response is Yes", choices: [ { value: "Item 1", text: "Yes", }, { value: "Item 2", text: "No", }, ], }, { type: "radiogroup", name: "question3", visibleIf: "{question2} = 'Item 1'", title: "Question 3 opens if Question2 response is Yes", isRequired: true, choices: [ { value: "Item 1", text: "Yes", }, { value: "Item 2", text: "No", }, ], }, ], }, ], showQuestionNumbers: "off", }

Should you have any further questions, please do let me know.