I have the submit button of my form tied to a query and I want to prevent multiple submissions until the query finishes (with or without errors) so I added this:
The submit button gets disabled eventually, but not instantaneously. In other words, there's nothing preventing me from clicking submit several times during the first half second. Is there a way to fix this?
Hi Nacho,
Thanks for bringing this to our attention!
I’ve implemented a feature that allows you to add a timeout.
Once it passes review and tests, I’ll have it out in prod today.
Best,
Hiren
To clarify, the new feature (live now) is a setting on the button component to disable the button for X milliseconds after being clicked. You can couple that with that disable setting you have, or just disable it for a set time. We'll see if we can add that in to the form as well as the button, but at the moment the workflow would be to use a container and a button to get that feature.
Thanks, Alex. This is useful.
A temporary alternative workaround I found yesterday was putting the form in a tabbed container and changing the tab on click (which happens automatically).
Any update on form button disable after click?
Hi Ricky! What is your ideal use case? You can set the button to disable based on a certain condition, like if there's data in a query or if a query.isFetching!
Hi Victoria, the problem with this solution you propose is that if you click multiple times and quickly the submit button it will trigger the query it is calling multiple times, I put on the query a confirmation modal to prevent sending the form multiple times but then you will end up with multiple modals opening up for send confirmation. It will be nice to have same feature as button disable after click a certain time any other disable form submition condition is not fast enough to prevent multiple clicks to be accepted before disable occurs.
Hi @alex-w
Is this for all buttons or just a form submission button? I can't seem to find this setting. I've attached an image of the button component I have.
Thanks!
@RickyGomez @PL13 With the launch of Event Handlers, this is now a setting that can be configured inside of the individual event handlers at a granular level! There are both debounce and throttle options for each event handler, as well as the overall global Disable conditional that @victoria mentions
