Key remains True after app rerun

[charlie-turntown]

Issue:

When you click the card on, the varible will turn true. However it remains true even after a re run of the app.

Scenario:

I have 2 cards in my app. I have an onclick function that prints the name of the card when clicked. When I click the first card I return the title 'Card 1'. The app then re runs as all streamlit apps do. After the rerun I click the second card and the app prints 'Card 1' and 'Card 2' because in the statefulness of the cards they are both considered true.

Solution.

The statefulness of the cards gets reset to false on app re runs.

Example:

        s1 = card(
                        title=1,
                        text="Card 1",
                        image="http://placekitten.com/200/300",
                        on_click=lambda: print("s1!"),
                        key = 's1')

        s2 = card(
                        title=2,
                        text="Card 2",
                        image="http://placekitten.com/200/300",
                        on_click=lambda: print("s2!"),
                        key = 's2')

[charlie-turntown]

@gamcoh

[OJddJO]

Already answered https://github.com/gamcoh/st-card/issues/17#issuecomment-1674965257

[OJddJO]

It should turn false after rerun

[charlie-turntown]

I don't believe this is a solution to my problem. I want to return the specific cards attributes. As it stays persisitent I can't determine which one was pressed, or weather the same one was re-clicked.

The scenario is these cards have different images, when clicked the image is shown at the top of the page. This works for the first card picked, but then after a rerun, you click another image and both will show at the top of the page, as both are 'True'. You could add all the clicks into a list and return the last item, however this won't account for when a user re selected an already picked image.

Does this make sense?

[gamcoh]

Can't you use the on_click param?

[gamcoh]

Also I don't believe this is an issue with the package but it's the way streamlit was designed

[charlie-turntown]

The on_click param would return both s1 and s2 from the example above if they have both been clicked. I think this is a package issue as other streamlit items don't behave this way. They return to false on a re-run, like a button

[charlie-turntown]

I believe the issue is something to do with this part of the code:

private onClick = (): void => { if (this.props.args.url) { window.open(this.props.args.url, "_blank"); } Streamlit.setComponentValue(true); }; }

should be something like:

const card = document.body.appendChild(document.createElement("card")); let state = "idle";

....

card.onclick = () => { console.log("clicked on", button.textContent); Streamlit.setComponentValue(true); state = "clicked"; };

....

if (state === "clicked") { state = "reset"; } else if (state === "reset") { Streamlit.setComponentValue(false); state = "idle"; } };