st.toggle gets (de)activated when clicking anywhere in the same row

[flucas96]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

Hey everyone,

I am happy to see that the new st.toggle feature got released with version 1.26. Thank you very much for that!!

I just tried it out and noticed that when clicking anywhere in the row where the toggle widget is placed it activates it.

I uploaded a small example of what I mean here:

Streamlit (toggletest.streamlit.app) 5

GIF:

Repost from:
https://discuss.streamlit.io/t/streamlit-toggle-in-version-1-26-bug/50118

Reproducible Code Example

import streamlit as st



st.toggle("Switch 1", value=False, key="switch1")


col_left,col_right = st.columns((1,1))
with col_left: 

    st.toggle("Switch left", value=False, key="switch_left")


with col_right:
    st.toggle("Switch right", value=False, key="switch_right")

Steps To Reproduce

1. Clicking anywhere in the same row a st.toggle button is.

Expected Behavior

When the cursor is not directly above the st.toggle button - clicking anywhere should not change its state.

Current Behavior

Clicking anywhere in the same row activates or deactivates the st.toggle.

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1,27
• Python version: 3.11
• Operating System: Windows / Linux / Streamlit Cloud
• Browser: Edge

Additional Information

No response

[github-actions]

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

[LukasMasuch]

@flucas96 Thanks for reporting this issue. In the current implementation, this behavior is mostly expected. This is working the same as the st.checkbox implementation. Changing this to enhancement since I think it is a valid consideration to change this behavior for checkbox and toggle.

[jandvorak-sol60279]

i found this issue today. st.toggle clickable is occupying whole box, where is rendered. if you split row into multiple ones, like with columns, it will be clickable only in that part of row, which bellongs to collumn.