Replacing eventTooltip template func to return `JSX` at runtime not working

[ghulamghousdev]

Forum post

When we replace the template function on eventTooltip to return JSX, it does not work. The custom JSX tooltip is not being shown. But if we return simple content, it works correctly.

Code snippet which returns JSX and does not work:

    const [useDefault, setUseDefault] = React.useState(false);
    const [eventTooltipFeature] = React.useState({
        template() {
            return <div>Custom content</div>;
        }
    })

    React.useEffect(()=>{
        if(schedulerRef.current?.instance){
            if (useDefault){
                schedulerRef.current.instance.features.eventTooltip.template =
                  schedulerRef.current.instance.features.eventTooltip.constructor.defaultConfig.template;
            } else {
                schedulerRef.current.instance.features.eventTooltip.template = null;
                schedulerRef.current.instance.features.eventTooltip.template = ()=>{return <div>Custom Content2</div>}
            }
        }
    },[useDefault])

    return (
        <Fragment>
            <BryntumDemoHeader />
            <BryntumButton onClick={()=>{setUseDefault(!useDefault)}} text='Change Tip'/>
            <BryntumScheduler
                ref={schedulerRef}
                {...schedulerConfig}
            />
        </Fragment>
    );

https://github.com/user-attachments/assets/f54c326b-06f9-4398-b4c3-469f7b876905

Code snippet using simple content and it works:

    const [useDefault, setUseDefault] = React.useState(false);
    const [eventTooltipFeature] = React.useState({
        template() {
            return 'Custom content2';
        }
    })

    React.useEffect(()=>{
        if(schedulerRef.current?.instance){
            if (useDefault){
                schedulerRef.current.instance.features.eventTooltip.template =
                  schedulerRef.current.instance.features.eventTooltip.constructor.defaultConfig.template;
            } else {
                schedulerRef.current.instance.features.eventTooltip.template = null;
                schedulerRef.current.instance.features.eventTooltip.template = ()=>{return 'Custom Content2'}
            }
        }
    },[useDefault])

    return (
        <Fragment>
            <BryntumDemoHeader />
            <BryntumButton onClick={()=>{setUseDefault(!useDefault)}} text='Change Tip'/>
            <BryntumScheduler
                ref={schedulerRef}
                {...schedulerConfig}
            />
        </Fragment>
    );

https://github.com/user-attachments/assets/1f7b9638-aedf-4b92-a4c0-e50223ef8bf0

Please use the below test case to reproduce it.

columns.zip