How to avoid double click

[Patrick-Barbosa]

Hey folks! What’s up?
I’m trying to create a code where, when the user clicks the button, it disables for a short moment or until they leave the page.
I want to do this because I’m using the button to upload information to a database, and the double-click on the same record messes things up.
I’m trying to implement this logic, but it’s not working…

Note: I’m using the latest version of Streamlit and Python 3.11.6.

[Shawn_Pereira]

Hi @Patrick-Barbosa, you could probably deactivate the button for the time your other processing is taking place? Here’s some sample code:

import time as tm   # just for testing / demo, to be deleted later

# create a session variable and set initial value to false
if "oneclick" not in st.session_state: st.session_state.oneclick = False
if "click_knt" not in st.session_state: st.session_state.click_knt = 0  # just for testing / demo, to be deleted later

def Callback():
    st.session_state.click_knt += 1 # just for testing / demo, to be deleted later
    st.session_state.oneclick = True
    
    tm.sleep(3) # just for testing / demo, to be deleted later
    # process your other code here...

    st.session_state.oneclick = False

st.write(f"You clicked me: {st.session_state.click_knt} times") # just for testing / demo, to be deleted later
st.button("Click Me", on_click=Callback, disabled=st.session_state.oneclick)

Cheers

[Patrick-Barbosa]

Well, I tried that example, and it didn’t work either. I imagine that Streamlit has a dedicated thread only for the front-end, allowing the user to click even when another process is running. I tried with multiple clicks, and it always registers two or more clicks.

[Caleb_Dame]

Facing the same issue here - trying different things for about a week now. I tried disabling the button via an on-click function call, but that still lets a second click come if if it gets there before the page refreshes. Also, from what I can see, the changes to the session state are not taken into consideration untill both executions/threads finish their respective tasks. I’m royally stumped.

[Caleb_Dame]

related issue
https://discuss.streamlit.io/t/execute-button-callback-once/49392/3

[Caleb_Dame]

My solution I hacked together to a similar problem.

I had to attach a volume disk so I could write out files.

At the beginning of the script, when the page first loads, I assign the person a random ID:

import string
import random

if "random_id" not in st.session_state:
    FILE_LEN = 32
    st.session_state["random_id"] = ''.join(random.choices(string.ascii_uppercase +string.digits, k=FILE_LEN))    

Then, when I am about to send off my API call I check the following:

def need_to_send_api(some_id):
    try:
        f = open(f"{st.session_state['random_id']}.txt", "r")
        f.close()
        return False
    except:
        file = open(f"{st.session_state['random_id']}.txt", "w")
        file.writelines(some_id)
        file.close()
        return True

send_api = need_to_send_api(some_id)

and if send_api is True, I make the API call. some_id is just some other unique ID i choose to write into the file. this should work with an empty file though. writing or creating a small file is so fast that no double click would be faster - also, Python locks accessing the file to a single thread at a time I believe - but dont quote me on that.

This is obviously imperfect, but it works. I also have a method that will remove any ID.txt files that are older than an hour to avoid worrying about space. One other downside is that as this is executing, you can still double click the button and if so the whole process takes even longer - but still only 1 API call is ever made (as far as my testing would indicate)

I am ready for someone to tell me this was stupid, but I would love to hear a better way.

[asehmi]

Hi @Patrick-Barbosa - You may find this mini tutorial useful

Mini-tutorial: Initializing widget values and getting them to stick without double presses

Hi, Have you ever found it frustrating to use widgets with initialized values, getting those values to survive through script reruns and noticed how sometimes you have to double click to get the value to stick? We all have! This seems to be a common issue amongst new Streamlit users, so I wrote a mini-tutorial app to explain how widgets are used with initialized values and how to make them stick using session state and callbacks. There are three ways: (1) the most basic where the initial valu…

[Gene_Ruebsamen]

Anyone find a solution? I’ve got a form submit that uses a callback function. If user double-clicks, form gets submitted twice.
The sample code provided above does not work.
Very annoying.