custom-widget.tsx create a wrapper

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

Requesting a feature/asking a question

What is the current behavior?

What i need is a custom widget that enable itself when some props are selected and renders a wrapper (collapsible) on some questions when checked.

What is the expected behavior?

inside the render function, to have a second parameter : creator, to pass it down to my custom wrapper that basically do

const comp = ReactQuestionFactory.Instance.createQuestion(element.getTemplate(), {
		question: element,
		isDisplayMode: element.isReadOnly,
creator:????
	});
	return <div ref={elRef} className={"blu-question"}>
		{!element.preCheckHideCheckbox && elRef.current && ReactDOM.createPortal(<CheckBox value={open}
		                                                                                   className={className}/>, $(elRef.current).parents(".question").find(".sv_q_title .num")[0])}
		<Collapse in={!!collapseOpen}>
			<div className={className}>{comp}</div>
		</Collapse>
	</div>

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

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

Tested page URL:

Test code

export const SurveyCheckboxWidget = {
	name: "confirmWidget",
	
	render: function (element) {

		return <SurveyCheckboxQuestion element={element}></SurveyCheckboxQuestion>
	},
	
	isFit: function (question) {
		return question.preCheckDisable ||
				question.preCheckHideCheckbox ||
				question.preCheckCollapse;
	},
	widgetIsLoaded: function () {
	
		return true; //we do not require anything so we just return true.
	},
};

Thanks in advance

[marc0n3]

https://codepen.io/marcone/pen/JVXqYb

Maybe to do this, instead of using a widget, I need to override reactquestion.tsx:renderQuestionBody and wrap inside my component.

a working solution is:

//save the original
SurveyQuestion.renderQuestionBodyOrig = SurveyQuestion.renderQuestionBody
SurveyQuestion.renderQuestionBody = function (creator, question) {
	const useWrapper = question.preCheckDisable ||
			question.preCheckHideCheckbox ||
			question.preCheckCollapse;

	const questionBody = this.renderQuestionBodyOrig(creator, question);
	if (useWrapper) {
		return <SurveyCheckboxQuestion element={question}>{questionBody}</SurveyCheckboxQuestion>
	}
	return questionBody;
}

Do I need to close the bug?

[carllau999]

@marc0n3

Not sure why but sometimes your solution gives me a Maximum call stack size exceeded error