MehdiChelh / dash-draggable

Dash components for building draggable and resizable grid layouts. Based on the well-known STRML/react-grid-layout.
MIT License
56 stars 13 forks source link

Dict as id does not work #10

Open lonlazer opened 2 years ago

lonlazer commented 2 years ago

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

dales commented 1 year ago

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

lonlazer commented 1 year ago

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