When changing visibility programmatically, styling not applied correctly

[pelshen]

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

Question (maybe bug)

What is the current behavior?

Given I have 4 questions, where all the questions are set to startWithNewLine = false, and the 4th question has visible false. When I set visibility programmatically (using visible = in an onChange callback) to false on the 3rd question and to true on the 4th question the newly appeared question doesn't appear on the same row, and I can see that the widths for all the questions has not been updated in the DOM. When I set the value of the question (in the form), then the row jumps to be in the correct place.

In my example, this is in a dynamic panel, but I'm not sure if this is important.

What is the expected behavior?

When I switch the visibilities, I expect the 4th question to appear in the same place the 3rd question was. I wondered whether there was something I could call manually after switching visibilities that would make this happen?

Specify your

• browser: Chrome
• browser version: 96
• surveyjs platform (angular or react or jquery or knockout or vue): react
• surveyjs version: 1.9.4

[OlgaLarina]

@pelshen I can't reproduce the problem you described. Please send us a sample code or update the plunker example.

Thank you, Olga

[pelshen]

Hi, thanks for investigating and creating the plunker. Played with it and tried simplifying my own code for a while and still couldn't reproduce my issue in the plunker (and couldn't remove the issue from my code).

However, one thing I tried in my code was to force React to re-render after the visibility swap and this fixed it. My code is a React function component and the component renders the Survey inside it. I'm not sure why this would cause different results from the ReactDOM.render method you've used, but wonder if you know of anything in SurveyJS that might mean that React doesn't automatically re-render based on changes? I'd prefer not to force a re-render if I can avoid it.

[tsv2013]

Hi! We checked again the issue description and the example provided by Olga. The example looks very similar to your description. We understand you do have issues with question visibility. But on the other hand I thing you understand that we can fix the issue only if we reproduce it on our side.

I don't see any difference between rendering inside a functional component or via the ReactDOM.render method. I can describe here how survey model changes trigger rendering: each visual react component has a model (view model) passed to it. Every change of any reactive model property changes the component state thus triggers a component rendering. But setState is called only then component has been mounted (otherwise changes in model are not needed to be reflected in UI). These subscriptions/unsubscriptions are performed in the mount/unmount lifecycle hooks/methods. I suspect in your case for some reason a model could be disposed and thus blocks state modifications. But we need to reproduce it locally to help you.

That's why I would ask you again to share a live sample illustrating the issue so we could investigate it and find the root of the issue. Appreciate your patience and cooperation.

[pelshen]

Yes, I understand, thanks for your explanation. I will try to build a reproducible example and get back to you