Skip to content

[BUG] Error when using . in dict ids #3480

@tlauli

Description

@tlauli

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

  • replace the result of pip list | grep dash below
dash                             3.2.0
dash_ag_grid                     31.3.1
dash_auth                        2.3.0
dash-bootstrap-components        2.0.4
dash-bootstrap-templates         2.1.0
dash-extensions                  2.0.4
dash-iconify                     0.1.2
  • if frontend related, tell us your Browser, Version and OS

    • OS: iOS
    • Browser chrome
    • Version 141.0.7390.66 (Official Build) (arm64)

Describe the bug

Trying to use dict id in a callback with a "." character in it leads to an error.
Expected behavior

It does not error.
MWE
Opening this page leads to a blank page, with error in the console.

from dash import Dash, Input, Output, html, callback

layout = [
    html.Button("Button", id={"component": "button.dot"}),
]


@callback(
    Output({"component": "button.dot"}, "children"),
    Input({"component": "button.dot"}, "n_clicks"),
    prevent_initial_call=True,
)
def test(n):
    return "test"


app = Dash(__name__)
app.layout = layout
app.run()

Error:

hook.js:608 SyntaxError: Bad escaped character in JSON at position 21 (line 1 column 22)
    at JSON.parse (<anonymous>)
    at dash_renderer.v3_2_0m1756799785.min.js:2:75910
    at $n (dash_renderer.v3_2_0m1756799785.min.js:2:75920)
    at Hn (dash_renderer.v3_2_0m1756799785.min.js:2:75726)
    at dash_renderer.v3_2_0m1756799785.min.js:2:77864
    at Pe (dash_renderer.v3_2_0m1756799785.min.js:2:54296)
    at dash_renderer.v3_2_0m1756799785.min.js:2:55241
    at dash_renderer.v3_2_0m1756799785.min.js:2:52978
    at e (dash_renderer.v3_2_0m1756799785.min.js:2:44876)
    at dash_renderer.v3_2_0m1756799785.min.js:2:77829
overrideMethod @ hook.js:608
react-dom@18.v3_2_0m1756799785.3.1.min.js:79 Uncaught SyntaxError: Bad escaped character in JSON at position 21 (line 1 column 22)
    at JSON.parse (<anonymous>)
    at dash_renderer.v3_2_0m1756799785.min.js:2:75910
    at $n (dash_renderer.v3_2_0m1756799785.min.js:2:75920)
    at Hn (dash_renderer.v3_2_0m1756799785.min.js:2:75726)
    at dash_renderer.v3_2_0m1756799785.min.js:2:77864
    at Pe (dash_renderer.v3_2_0m1756799785.min.js:2:54296)
    at dash_renderer.v3_2_0m1756799785.min.js:2:55241
    at dash_renderer.v3_2_0m1756799785.min.js:2:52978
    at e (dash_renderer.v3_2_0m1756799785.min.js:2:44876)
    at dash_renderer.v3_2_0m1756799785.min.js:2:77829

Metadata

Metadata

Assignees

Labels

P3backlogbugsomething broken

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions