Modern Theme cannot be applied after change in c2d18fa49744d3621773f11db8ca9caad211b223

[seckii]

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

A bug (a regression to be precise)

What is the current behavior?

If you run Survey.StylesManager.applyTheme('modern') from the code embedding the survey library, it still uses the default css.

What is the expected behavior?

The css of the modern theme is used.

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

See above.

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

I have tested this on internal pages which cannot be made public, however I hunted down the commit and can give some more context that should help fixing the bug:

The bug has been traced to commit c2d18fa49744d3621773f11db8ca9caad211b223 .

Before this commit, if you embed survey-react the following dom is produced:

<div class="sv-root-modern"><form>
...
   <input class="sv-btn sv-footer__complete-btn" type="button" value="Complete" style="margin-right: 5px;">
...
</form></div>

With this, the calculated css is correctly overriden and the modern theme is applied as one can see in the development console.

After the before mentioned commit the dom is the following:

<div class="sv_main sv_default_css"><form>
...
   <input class="sv-btn sv-footer__complete-btn" type="button" value="Complete" style="margin-right: 5px;">
...
</form></div>

Hence, the theme is not applied as the sv-root-modern class is missing now.

I hope that will help!

Sincerely, Eckhard

[tsv2013]

I've checked our online demos - https://surveyjs.io/Examples/Library?id=real-covid-19&platform=Reactjs&theme=modern This one (and other) works ok for me

Can you modify it to illustrate the issue?

[seckii]

Well, where can I change the JavaScript code? We do roughly the same, but we get after the above commit a change in behaivouir, I can try to make it more similar, but this demo site doesn't seem to provide a sandbox. Please be so kind and help me there.

Also, providing the commit, maybe you can think of a direction to look for - it might not be easy to strip the more involved real example to a working test case, so an idea would be very beneficial.

[andrewtelnov]

@seckii If you provide us an example that doesn't work, we will take a look.

Thank you, Andrew

[seckii]

We have an example here: https://codesandbox.io/s/silly-cherry-nsf96

With the 1.8.79 version, the default version and not the modern version is used. With the previous version, the modern version is used.

[tsv2013]

The theme should be applied before model created:

  Survey.StylesManager.applyTheme("modern");
  const survey = new Survey.Model(json);

Here is your updated example - https://codesandbox.io/s/adoring-tdd-yjeej

[seckii]

We saw that ourselves, but you asked us for an example that showcases the issue - our code base is more involved. The behavior regresses at the mentioned commit - and the commit itself does not hint at this change.

Is this dependency on purpose or just incidental? At least I have a hard time figuring that out form the documentation. I pretty much assumed that theme selection needs to be done before rendering and not before constructing of the model. Could at least the documentation be clarified?

[tsv2013]

The behavior regresses at the mentioned commit

In all our samples the theme is applied in the start of code. It wasn't supposed that you can switch the theme at any point of your program.