0

I am using SurveyJS to quickly build a survey form in React/Redux.

I implemented a custom widget using a React component for Google Maps Places Autocomplete. My problem is that once suggestions appear and the field state changes, the contents of all the other survey fields get cleared. Is there a way to prevent it?

Here's what I did to integrate React Places Autocomplete into the survey as a custom widget.

ajie
  • 23
  • 6
  • Hello! I am one of SurveyJS contributor. I would suggest you to check our README https://github.com/surveyjs/widgets *Add your own custom widget* section. It contains an example of custom widget with usefull comments https://plnkr.co/edit/HdnYE5?p=preview. Probably the bug is related to "two way" binding. – Dmitry Kurmanov Mar 27 '18 at 11:30

1 Answers1

-1

As soon as you select the Address field the onChange is called, the component loses the state for the other fields.

"setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders." from reactjs.org

Kix__g
  • 25
  • 5
  • Could you please explain a little bit more? – Nico Albers Mar 16 '18 at 10:59
  • Thanks, @Kix_g, I ended up wrapping the PlacesAutocomplete with another component which I then used as the custom widget for SurveyJS. setState() on the wrapper component re-renders PlacesAutocomplete but did not affect the rest of the form, which helped preserve content of the other 'normal' fields. I'd give you an upvote but I do not have enough reputation to be able to do so. – ajie Mar 16 '18 at 14:08