onSelected uses stale function even when prop for onSelected changed

While using react plotly I noticed that changes to the onSelected prop are ignored and the initial function used for that prop is called instead when building a lasso based chart. This is an issue when we want to listen to context changes to things like translations.

The code below shows the issue:

  const translations = useTranslation<TaggingIndicatorsTranslations>(
    allTranslations
  );
  const [currentBranch] = useBranch();
.....
.....
.....
   const filterSelectedProductsWithContext = function filterSelectedProductsCB(
    param: PlotSelectionEvent
  ) {
    filterSelectedProducts(param, currentBranch, translations);
  };

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <Plot
        data={table}
        config={{ displayModeBar: false, plotlyServerURL: currentBranch }}
        layout={{
          dragmode: "lasso",
          xaxis: { title: xAndY.x },
          yaxis: { title: xAndY.y },
          autosize: true,
          // title: "Helpful Indicators To Tag",
        }}
        useResizeHandler
        style={{ width: "100%", height: "90%" }}
        onSelected={filterSelectedProductsWithContext}
      />
    </div>
  ); 

In the above translations and branch are context values (custom context values) that change. We want the behavior of onSelected to change to reflect this (to use a new callback.) Even when changes to data are reflected in the render we still see the stale onSelected is being used when lasso selecting bullet points.

This code snippet was used in a react hook with react-plotly version 2.4.0 and 2.3.0.

I have tried using big arrow and the "function" keyword but neither work. Looking at the source code for factory.js (https://github.com/plotly/react-plotly.js/blob/master/src/factory.js) I do see there is some handler replacement logic in "syncEventHandlers" when handlers are not the same to the props. I was thinking though that the updatePlotly function (that calls this synchronization might) might not be getting called during componentDidUpdate because the onSelected prop wasn't checked.

As a workaround right now I have to take my contexts and place them in a global wrapper so their changes are visible. Its not a good solution but I can't think of a better one and our contexts are mostly global for the entire dom tree anyways.

src/factory.js から始め、componentDidUpdate 中の syncEventHandlers と updatePlotly のパスを読みます。context 値が変化する場合のラッソ選択ケースを再現し、onSelected が初期の prop callback ではなく最新の prop callback を使用することを確認します。