surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.18k stars 808 forks source link

Updating from 1.0.60 breaks dynamic content #1523

Closed awlayton closed 5 years ago

awlayton commented 5 years ago

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

Reporting a bug

What is the current behavior?

Since upgrading survey-react, I get the below error whenever my page has collapsed panels or dynamic panels.

survey.react.js:9486 Uncaught TypeError: Cannot read property 'name' of undefined
    at SurveyQuestionPanelDynamicItem.SurveyPanelBase.componentDidUpdate (survey.react.js:9486)
    at commitLifeCycles (react-dom.development.js:17013)
    at commitAllLifeCycles (react-dom.development.js:18512)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:18717)
    at completeRoot (react-dom.development.js:20247)
    at performWorkOnRoot (react-dom.development.js:20170)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at interactiveUpdates$1 (react-dom.development.js:20337)
    at interactiveUpdates (react-dom.development.js:2267)
    at dispatchInteractiveEvent (react-dom.development.js:5083)
The above error occurred in the <SurveyQuestionPanelDynamicItem> component:
    in SurveyQuestionPanelDynamicItem (created by SurveyQuestionPanelDynamic)
    in div (created by SurveyQuestionPanelDynamic)
    in SurveyQuestionPanelDynamic (created by SurveyQuestion)
    in div (created by SurveyQuestion)
    in div (created by SurveyQuestion)
    in SurveyQuestion (created by SurveyRow)
    in div (created by SurveyRow)
    in SurveyRow (created by SurveyPage)
    in div (created by SurveyPage)
    in SurveyPage (created by Survey)
    in div (created by Survey)
    in div (created by Survey)
    in form (created by Survey)
    in div (created by Survey)
    in Survey (at Questions.js:21)
    in Questions (created by CerebralWrapping_Questions)
    in CerebralWrapping_Questions (at App.js:31)
    in div (at App.js:22)
    in App (created by CerebralWrapping_App)
    in CerebralWrapping_App (at src/index.js:20)
    in Container (at src/index.js:19)

In the case of collapsed panels the site works fine until I try to expand the panel. Then I get the mentioned error in the console and the page becomes blank. Whenever I try to load a page of questions with a dynamic panel element, the page never loads and the error prints to the console.

If I default all the panels to expanded and have no dynamic elements, my site works with the latest version.

What is the expected behavior?

Before upgrade from survey-react@1.0.60, my site worked fine with collapsed panels and dynamic panels.

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

create a survey using either a panel defaulting to collapsed, or a dynamic panel element.

Specify your

awlayton commented 5 years ago

I managed to reproduce the error using surveyjs_react_quickstart and replacing the contents of App.js with the following:

import React, {Component} from 'react'

import * as Survey from "survey-react";
import "survey-react/survey.css";

class App extends Component {
 json = {
    pages: [
        {
          name: 'uav-sensors',
          title: 'Sensors',
          elements: [
            {
              name: 'sensors',
              title: 'Sensors',
              type: 'paneldynamic',
              panelCount: 1,
              panelAddText: 'Add Sensor',
              panelRemoveText: 'Remove Sensor',
              templateTitle: 'Sensor #{panelIndex}',
              templateElements: [
                {
                  name: 'uav-sensor-type',
                  valueName: 'type',
                  title: 'Type',
                  type: 'dropdown',
                  isRequired: true,
                  hasOther: true,
                  choices: [
                    'RGB',
                    'Multispectral',
                    'Hyperspectral',
                    'LiDAR',
                    'Thermal',
                  ],
                },
              ],
            },
          ],
        },
    ]
 };
 render() {
  var model = new Survey.Model(this.json);
  return (<Survey.Survey model={model} onComplete={this.onComplete}/>);
 }
}

export default App;
tsv2013 commented 5 years ago

Fix will be available in the nearest update, most likely tomorrow.

StephanMeijer commented 5 years ago

@awlayton what was the actual issue? still occurring in my application

awlayton commented 5 years ago

I didn't have to change anything. Once I updated to the new version I haven't had the problem. I'm not sure what was changed in the library.