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

[REF-3375] Accordion Item that depends on state var does not stay open unless value prop is set. #3707

Closed
masenf opened this issue Jul 25, 2024 · 0 comments · Fixed by #3708
Assignees
Labels
bug Something isn't working
Milestone

Comments

@masenf
Copy link
Collaborator

masenf commented Jul 25, 2024

Describe the bug
When the value prop is not provided, the default generateUUID() is used, which generates a new unique identifier. The problem arises when the component has to re-render: the value is also re-generated. If opening the accordion item triggers some update that causes the item to re-render then it basically cannot stay open because the open state is tied to the value.

To Reproduce

import reflex as rx


class State(rx.State):
    """The app state."""
    sindex: int = 0


def index() -> rx.Component:
    # Welcome Page (Index)
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.vstack(
            rx.heading("Welcome to Reflex!", size="9"),
            rx.accordion.root(
                rx.accordion.item(
                    header="Default value, cannot stay open",
                    content=f"When this component re-renders it gets a new value which is not considered open.",
                    on_click=State.set_sindex(0),
                    style={"--foo": State.sindex},
                    # value="1",
                ),
                rx.accordion.item(
                    header="Explicit value, stays open fine",
                    content=f"Even when this component has to re-render it stays open because value is constant.",
                    on_click=State.set_sindex(1),
                    style={"--foo": State.sindex},
                    value="2",
                ),
                width="300px",
            ),
            spacing="5",
            justify="center",
            min_height="85vh",
        ),
        rx.logo(),
    )


app = rx.App()
app.add_page(index)

Expected behavior
The accordion item's open state is not reset when re-rendering the component (due to style change or otherwise).

Screenshots
If applicable, add screenshots to help explain your problem.

Specifics (please complete the following information):

  • Python Version: 3.11
  • Reflex Version: 0.5.7
  • OS: macOS 14

REF-3375

@masenf masenf added the bug Something isn't working label Jul 25, 2024
@masenf masenf changed the title Accordion Item that depends on state var does not stay open unless value prop is set. [REF-3375] Accordion Item that depends on state var does not stay open unless value prop is set. Jul 25, 2024
masenf added a commit that referenced this issue Jul 25, 2024
When using rx.vars.get_uuid_string_var, wrap the prop Var in `useMemo` so that
the value remains consistent across re-renders of the component.

Fix #3707
@masenf masenf self-assigned this Jul 25, 2024
@masenf masenf added this to the v.44 milestone Jul 25, 2024
@masenf masenf closed this as completed in a4e3f05 Jul 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant