Skip to content

Old event handlers are not removed when they are replaced in version 3.0.5 #615

@acsbendi

Description

@acsbendi

Seems like this change introduced a bug where old event handlers are not removed when the event handler changes. Here is a reproduction, on 3.0.5 both handlers are active after changing the checkbox:

export default function App() {
    const [usePopupHandler, setUsePopupHandler] = useState(true);

    const option = {
        xAxis: {
            type: "category",
            data: ["Sample"],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [120],
                type: "bar",
            },
        ],
    };


    const handleClickPopup = useCallback(() => {
        alert("Bar clicked! (Popup handler)");
    }, []);


    const handleClickConsole = useCallback(() => {
        console.log("Bar clicked! (Console handler)");
    }, []);


    const onEvents = {
        click: usePopupHandler ? handleClickPopup:handleClickConsole
    };

    return (
            <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
                <div className="p-6 rounded-2xl shadow-lg w-[500px] bg-white">
                    <div>
                        <div className="flex items-center justify-between mb-4">
                            <h1 className="text-xl font-semibold">ECharts Click Handler Demo</h1>
                            <div className="flex items-center space-x-2">
                                <span className="text-sm">Use popup handler</span>
                                <input type="checkbox" checked={usePopupHandler}
                                       onChange={e => setUsePopupHandler(e.target.checked)}/>
                            </div>
                        </div>
                        <ReactECharts option={option} onEvents={onEvents} style={{height: "300px"}}/>
                    </div>
                </div>
            </div>
    );
}

It is possible that the off(eventType?: keyof EvtDef, handler?: Function) API in ECharts is buggy and doesn't work well when the handler argument is provided.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions