Merge pull request #3168 from plotly/fix/dot-in-dict

Fix clientside pattern matching with a dot in the id.

Author: T4rk1n

dash/dash-renderer/src/actions/callbacks.ts

@@ -661,9 +661,14 @@ function getTriggeredId(triggered: string[]): string | object | undefined {
     // for regular callbacks,  takes the first triggered prop_id, e.g.  "btn.n_clicks" and returns "btn"
     // for pattern matching callback, e.g. '{"index":0, "type":"btn"}' and returns {index:0, type: "btn"}'
     if (triggered && triggered.length) {
-        let componentId = triggered[0].split('.')[0];
-        if (componentId.startsWith('{')) {
-            componentId = JSON.parse(componentId);
+        const trig = triggered[0];
+        let componentId;
+        if (trig.startsWith('{')) {
+            componentId = JSON.parse(
+                trig.substring(0, trig.lastIndexOf('}') + 1)
+            );
+        } else {
+            componentId = trig.split('.')[0];
         }
         return componentId;
     }

tests/integration/clientside/test_clientside.py

@@ -4,6 +4,8 @@
 from dash import Dash, Input, Output, State, ClientsideFunction, ALL, html, dcc
 from selenium.webdriver.common.keys import Keys
 
+from dash.dependencies import MATCH
+
 
 def test_clsd001_simple_clientside_serverside_callback(dash_duo):
     app = Dash(__name__, assets_folder="assets")
@@ -905,3 +907,33 @@ def update_output(value):
     dash_duo.find_element("#input").send_keys("hello world")
     dash_duo.wait_for_text_to_equal("#output-serverside", 'Server says "hello world"')
     dash_duo.wait_for_text_to_equal("#output-clientside", 'Client says "hello world"')
+
+
+def test_clsd022_clientside_pattern_matching_dots(dash_duo):
+    # Test for bug https://github.com/plotly/dash/issues/3163
+    # Allow dict id to contains a dot in the dict when using clientside callback.
+    app = Dash()
+    app.layout = html.Div(
+        [
+            html.Button("click", id={"type": "input", "index": 3.1}),
+            html.Div(id={"type": "output", "index": 3.1}, className="output"),
+        ]
+    )
+
+    app.clientside_callback(
+        """
+        function(n_clicks) {
+            return `clicked ${n_clicks}`;
+        }
+        """,
+        Output({"type": "output", "index": MATCH}, "children"),
+        Input({"type": "input", "index": MATCH}, "n_clicks"),
+        prevent_initial_call=True,
+    )
+
+    dash_duo.start_server(app)
+
+    dash_duo.find_element("button").click()
+    dash_duo.wait_for_text_to_equal(".output", "clicked 1")
+
+    assert dash_duo.get_logs() == []