Radiogroup widget afterRender code undone on value change

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

[dmitrykurmanov]

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

[dmitrykurmanov]

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