Fixed the issue 2493. Passing customdata by userclick

components/dash-core-components/src/fragments/Graph.react.js

@@ -87,12 +87,22 @@ const filterEventData = (gd, eventData, event) => {
                 has('customdata', data[pointData.curveNumber])
             ) {
                 if (has('pointNumber', fullPoint)) {
-                    pointData.customdata =
-                        data[pointData.curveNumber].customdata[
-                            fullPoint.pointNumber
-                        ];
+                    if (typeof fullPoint.pointNumber === 'number') {
+                        pointData.customdata =
+                            data[pointData.curveNumber].customdata[
+                                fullPoint.pointNumber
+                            ];
+                    } else if (
+                        !fullPoint.pointNumber &&
+                        fullPoint.data.mode.includes('lines')
+                    ) {
+                        pointData.customdata =
+                            data[pointData.curveNumber].customdata;
+                    }
                 } else if (has('pointNumbers', fullPoint)) {
-                    pointData.customdata = fullPoint.pointNumbers.map(point => {
+                    pointData.customdata = fullPoint.pointNumbers.map(function (
+                        point
+                    ) {
                         return data[pointData.curveNumber].customdata[point];
                     });
                 }

components/dash-core-components/tests/integration/graph/test_graph_basics.py

@@ -321,3 +321,51 @@ def set_data(dataset):
     assert dash_dcc.wait_for_text_to_equal(
         "#relayout-data", "[0, -1, -2]"
     ), "graph data must contain frame [0,-1,-2]"
+
+
+def test_grbs007_graph_scatter_lines_customdata(dash_dcc):
+    app = Dash(__name__)
+
+    expected_value = "obj-1"
+
+    scatter_figures = go.Figure(
+        data=[
+            go.Scatter(
+                x=[0, 1, 1, 0, 0],
+                y=[1, 1, 2, 2, 1],
+                mode="lines",
+                fill="toself",
+                customdata=[expected_value],
+            )
+        ]
+    )
+
+    app.layout = html.Div(
+        [
+            dcc.Graph(
+                id="scatter-lines",
+                figure=scatter_figures,
+                style={"width": 600, "height": 300},
+            ),
+            dcc.Textarea(id="test-text-area"),
+        ],
+        style={"width": 1000, "height": 500},
+    )
+
+    @app.callback(
+        Output("test-text-area", "value"), Input("scatter-lines", "clickData")
+    )
+    def handleClick(clickData):
+        return json.dumps(clickData)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#scatter-lines")
+
+    dash_dcc.find_elements("g .xy")[0].click()
+
+    data = dash_dcc.wait_for_element("#test-text-area").get_attribute("value")
+    assert data != "", "graph clickData must contain data"
+
+    data = json.loads(data)
+    assert "customdata" in data["points"][0], "graph clickData must contain customdata"
+    assert data["points"][0]["customdata"][0] == expected_value

components/dash-html-components/tests/test_integration.py

@@ -113,8 +113,12 @@ def test_click_static(dash_duo):
             [
                 html.Div("no event listener", className="div-1"),
                 html.Div("event listener", id="div-2", n_clicks=0),
-                html.Div("no event listener", id="div-3", n_clicks=0, disable_n_clicks=True),
-                html.Div("event listener", id="div-4", n_clicks=0, disable_n_clicks=False),
+                html.Div(
+                    "no event listener", id="div-3", n_clicks=0, disable_n_clicks=True
+                ),
+                html.Div(
+                    "event listener", id="div-4", n_clicks=0, disable_n_clicks=False
+                ),
                 html.Div(id="div-output"),
             ]
         )

tests/integration/clientside/test_clientside_restarts.py

@@ -12,17 +12,19 @@ def create_app():
 
         app = Dash(__name__)
 
-        app.layout = html.Div([
-            html.Button("Click", id="click"),
-            html.Div(id="output"),
-            html.Div(reloads, id="reload")
-        ])
+        app.layout = html.Div(
+            [
+                html.Button("Click", id="click"),
+                html.Div(id="output"),
+                html.Div(reloads, id="reload"),
+            ]
+        )
 
         app.clientside_callback(
             "(n_clicks) => `clicked ${n_clicks}`",
             Output("output", "children"),
             Input("click", "n_clicks"),
-            prevent_initial_call=True
+            prevent_initial_call=True,
         )
         reloads += 1
         return app
@@ -35,20 +37,13 @@ def create_app():
         dev_tools_hot_reload_max_retry=100,
     )
 
-    dash_duo_mp.start_server(
-        create_app(),
-        **hot_reload_settings
-    )
+    dash_duo_mp.start_server(create_app(), **hot_reload_settings)
     dash_duo_mp.find_element("#click").click()
     dash_duo_mp.wait_for_text_to_equal("#output", "clicked 1")
 
     dash_duo_mp.server.stop()
 
-    dash_duo_mp.start_server(
-        create_app(),
-        navigate=False,
-        **hot_reload_settings
-    )
+    dash_duo_mp.start_server(create_app(), navigate=False, **hot_reload_settings)
     dash_duo_mp.wait_for_text_to_equal("#reload", "1")
     dash_duo_mp.find_element("#click").click()
     # reloaded so 1 again.