dash-draggable icon indicating copy to clipboard operation
dash-draggable copied to clipboard

Dict as id does not work

Open lazerstg opened this issue 3 years ago • 2 comments

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

)

lazerstg avatar Jun 08 '22 10:06 lazerstg

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

dales avatar Jan 08 '23 10:01 dales

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

lazerstg avatar Jan 16 '23 09:01 lazerstg