onSelected event not being called

[porteron]

When selecting a region on the <Plot> the onSelected event is not firing. Other events such as onUpdate and onClick work.

Plot Component:

            <Plot
                onSelected={(data) => this.setTotalData(data)}
                layout={layout}
                useResizeHandler={true}
                style={{ width: "100%", height: "100%" }}
                data={data}
            />

Function to be called:

    setTotalData = (data) => {
        console.log("Selected Data: ", data)
    }

[porteron]

@antoinerg Could you check this out? Thank you.

[alagiz]

@mnoster i use it in exactly the same way and it works for me

[porteron]

@ArtemAlagizov What version of react?

[alagiz]

@mnoster "react": "^16.4.2",
"plotly.js": "^1.43.2", "react-plotly.js": "^2.2.0"

[alagiz]

and the usage:

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

class TabPanelContent extends Component {
  state = {
    data: [],
    layout: {}
  };

  ....

  onSelected = data => {
    console.log(data, 'data');
  }

  render() {
    return (
      <div className="scatterplot-container">
        <Plot
          data={this.state.data}
          layout={this.state.layout}
          onSelected={data => this.onSelected(data)}
          style={{width: "100%", height: "50%"}}
          useResizeHandler={true}
        />
      </div>
    );
  }
}

export default TabPanelContent;

[Thilak8654]

I want to use onSelected and onClick both the events for the plot. If i use that, even for the click, it is going to onSelected, How to use onSelected and onClick events.

[Sednaoui]

@mnoster you are using the event prop correctly. I might know where your confusion lays:

To properly use the onSelected prop, you should select 'Box Select' or 'lasso Select' from the options on the plotly chart. The default selection is for zooming.

[KestutisMa]

onSelected is not working for me, but onSelecting is working

[dmt0]

Can somebody please make a reproduction of the issue?