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

Style Cannot Be Updated #480

Closed
rmorshea opened this issue Aug 27, 2021 · 3 comments · Fixed by #481
Closed

Style Cannot Be Updated #480

rmorshea opened this issue Aug 27, 2021 · 3 comments · Fixed by #481
Labels
type-bug About something that isn't working

Comments

@rmorshea
Copy link
Collaborator

When clicking the button in the code below it's background color should change, but it does not:

import idom


@idom.component
def Test():
    color_toggle, set_color_toggle = idom.hooks.use_state(False)
    color = "red" if color_toggle else "blue"
    return idom.html.div(
        idom.html.button(
            {
                "onClick": lambda event: set_color_toggle(not color_toggle),
                "style": {"backgroundColor": color, "color": "white"},
            },
            "toggle",
        ),
    )


idom.run(Test, port=5000)

Originally reported by @jgburford in #478 (reply in thread)

@rmorshea
Copy link
Collaborator Author

Probably the cause of the broken snake game example: #451

@rmorshea rmorshea added the type-bug About something that isn't working label Aug 27, 2021
@rmorshea
Copy link
Collaborator Author

This fixes it:

import idom
import random


@idom.component
def Test():
    color_toggle, set_color_toggle = idom.hooks.use_state(False)
    color = "red" if color_toggle else "blue"
    return idom.html.div(
        idom.html.button(
            {
                "onClick": lambda event: set_color_toggle(not color_toggle),
                "style": {"backgroundColor": color, "color": "white"},
            },
            "toggle",
            key=str(random.random()),
        ),
    )


idom.run(Test, port=5000)

There's something wrong with keys...

@rmorshea
Copy link
Collaborator Author

Turns out its because we started modifying the view model inplace using fast-json-patch - React was checking to see if the identity of the style changed, and since it was modified in place, it never was. This was a pretty old bug I just never caught.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type-bug About something that isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant