Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dict as id does not work #10

Open
lonlazer opened this issue Jun 8, 2022 · 2 comments
Open

Dict as id does not work #10

lonlazer opened this issue Jun 8, 2022 · 2 comments

Comments

@lonlazer
Copy link

lonlazer commented Jun 8, 2022

When Python dicts are used as element id, all of the elements get the same React key [object Object] because dicts are not stringified correctly. Because of this, all elements are on top of each other.

Being able to use dicts as element ids is especially important for Pattern-Matching Callbacks.

Example:

app.layout = html.Div([
    html.H1("Dash Draggable"),
    dash_draggable.GridLayout(
        id='draggable',
        save=False,
        children=[
            html.Div("HELLO 1", id={"type": "text", "id": "hello1"}),
            html.Div("HELLO 2", id={"type": "text", "id": "hello2"}),
            html.Div("HELLO 3", id={"type": "text", "id": "hello3"}),
            html.Div("HELLO 4", id={"type": "text", "id": "hello4"})
        ]
    ),
])

dash-draggable
image

Léon Lazar leon.lazar@mercedes-benz.com on behalf of Mercedes-Benz Tech Innovation GmbH, Imprint

@lonlazer lonlazer changed the title Dicts as id do not work Dict as id does not work Jun 8, 2022
@dales
Copy link

dales commented Jan 8, 2023

Any update about this? besides manually converting the id to a string?
Any other solutions to this issue?

@lonlazer
Copy link
Author

lonlazer commented Jan 16, 2023

Any update about this? besides manually converting the id to a string? Any other solutions to this issue?

I have fixed it in our fork https://github.com/mercedes-benz/dash-draggable/tree/bugfix/dict_as_id
Since no one seems to merge PRs, I did not bother to open another PR.

To use it, you would have to build the package by yourself and install it manually: https://github.com/MehdiChelh/dash-draggable/blob/5fd5d87c6aaa0a1bd4e666540d693314a03ac616/README.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants