React scattergl drag issue

Hello! I’ve been here a lot for answers, but this is my first post. Apologies for any bad etiquette.

I’m using react-plotly.js with typescript. I’m running into an issue with dragging on the graph (such as to make a selection). I’m not sure if this is known or by design. The following is a minimal example to demonstrate the behavior.

import React, { useState } from 'react';
import Plot from 'react-plotly.js';

const exampleData:Plotly.Data[] = [
  {
    type: "scattergl",
    x: [1,2],
    y: [1,2]
  }
]

function App() {
  const [selectionQ, setSelectionQ] = useState(false);

  return (
    <>
      <div>
        <button
          onClick={() => setSelectionQ(!selectionQ)}
        >
          Trigger Selection
        </button>
      </div>
      <Plot
        data={exampleData}
        layout={{
          dragmode: selectionQ ? 'select' : 'zoom'
        }}
      />
    </>
  );
}

export default App;

It is simply a button that controls a state governing whether the default dragmode is select or zoom. What happens is the page loads fine, and everything works. Once the button is clicked, the dragmode switches to select, but when I try to drag (not just click), I get the following error.

Cannot read properties of null (reading '0')
TypeError: Cannot read properties of null (reading '0')
    at Object.select [as selectPoints] (http://localhost:3004/static/js/bundle.js:103325:54)
    at _doSelect (http://localhost:3004/static/js/bundle.js:17797:49)
    at reselect (http://localhost:3004/static/js/bundle.js:17892:31)
    at dragOptions.moveFn (http://localhost:3004/static/js/bundle.js:17190:22)
    at HTMLDocument.onMove (http://localhost:3004/static/js/bundle.js:5184:23)

After extensive head-slamming, I’ve discovered that the problem seems to be with scattergl because it all works fine if I use scatter.

Some more observations (maintaining scattergl):

  • Moving the definition of exampleData into the App function fixes the issue, but this is a problem if I’m trying to pass the data to a state as a prop.
  • Manually selecting the Box Select tool does NOT cause the same error.
  • In fact, after manually selecting the Box Select tool (or even just ignoring the initial error), the button works totally fine.
  • Defaulting the selectionQ state to true works totally fine, and the button can be toggled without issue.

Again, I’m not sure if this is a known limitation of scattergl or if I’m just doing something in some horribly unidiomatic way.

Thanks!