Survey-library: Radiogroup widget afterRender code undone on value change

Created on 12 Apr 2017  路  7Comments  路  Source: surveyjs/survey-library

In order to restyle a radio button I added an extra span after it, in the otherwise default Bootstrap structure. This lets me style the radio button with input + span and input:checked + span without using any extra JavaScript to rebuild the default behavior.

To add this extra span in Survey JS I used the widget approach, targeting all radiogroups:

var widget = {
    name: 'radiogroup-styling',
    isFit: function (question) {
        return question.getType() === 'radiogroup';
    },
    isDefaultRender: true,
    afterRender: function(question, el) {
        $(el).find('input').after('<span/>');
    }
};

This works like a charm, until you click a radio button/change the value. Then the extra span disappears and only the original Survey JS DOM structure remains. I have created a CodePen to show the issue:
http://codepen.io/Wimski/pen/YVzzZW

bug fixed

All 7 comments

@WimWidgets hello! This is a bug. We fixed it in 2b8b28ab932a3c0901977247fbad428d861cc2fc. Thanks, as a workaround you can use isDefaultRender: false and render your markup.

When do you expect the fix to be available in a new version through NPM? Because I'd rather wait a little instead of manually rewriting the form structure that was already completely fine.

@WimWidgets , we'll release new version 0.12.8 until the end of the week.

@WimWidgets it is ok for you? You may build current master branch and use it untill the release.

My team is going to make a decision next Monday. If the fix is available as an update through NPM by then and it works as expected, we'll be using the Survey JS front-end in our project.

@WimWidgets we've released v.0.12.8. It is works now. Example pen: http://codepen.io/anon/pen/xdxBdo

@dmitrykurmanov Thank you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

testweird123 picture testweird123  路  4Comments

aslanbeily picture aslanbeily  路  4Comments

xiuzhen1103 picture xiuzhen1103  路  4Comments

Zucka picture Zucka  路  4Comments

halexiev-hedgeserv picture halexiev-hedgeserv  路  4Comments