Modern Theme cannot be applied after change in c2d18fa49744d3621773f11db8ca9caad211b223

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]

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

[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.