kirby
kirby copied to clipboard
Dialogs: disable buttons while processing
Description
our users sometimes report a TypeError which i was not able to reproduce until today.
The users are mainly Windows-User and hence used to doubleclick on things – even on the web. If you try to rename a page and commit the dialog with a (quick) doubleclick on change you can safely reproduce this issue:
TypeError: Cannot read properties of undefined (reading 'error') at a.onSubmit (index.js:formatted:2076:35)
The doubleclick also seems to be the reason for error reports when duplicating and deleting pages where the dialog says “page exists already” or “page is already deleted” which is correct from kirbys point of view as the first click of the doubleclick leads to intended change already.
Expected behavior
No error should occur and ideally doubclicks should be prevented. A Forum-User (Manuel) suggested here https://forum.getkirby.com/t/dialogs-typeerror-on-double-click/25651/4?u=teichsta to disable buttons after click for some time useing the setTimeout()
method.
To reproduce
- Go to panel
- Click on "rename" or "delete" page
- Doubleclick and "OK", "Rename"
- See error
Your setup
Kirby Version
3.6.2
(see forum post: https://forum.getkirby.com/t/dialogs-typeerror-on-double-click/25651)
I can't reproduce the issue with fast double click 🙂 but can with running following JS code in browser console:
document.getElementById("unique-id").click();
document.getElementById("unique-id").click();
it turns out, that i wasn't able to reproduce this TypeError
either BUT there is still an issue with double clicks. With a new starterkit i could reproduce this error:
- click "add" new page
- type title for new page
- doubleclick "create draft"
It was also possible with "rename page" and "delete page" after some tries (sometimes it didn't occured on first try)
![image](https://user-images.githubusercontent.com/2108636/175261990-4b47dd53-f727-4a40-a872-619f93c5cdae.png)
or kirby shows this dialog:
![image](https://user-images.githubusercontent.com/2108636/175263791-8b9ec790-e34a-4226-aeb2-3a5c3612ff42.png)
sometimes the dialog shortly appears in the background and get's closed automatically.
✅
@distantnative I can still reproduce the issue with running lines from console. This means that the issue will still occur if clicked too fast.
document.getElementById("unique-id").click();
document.getElementById("unique-id").click();
If JavaScript calls clicking twice are faster than the JavaScript disabling the button, I don't think we can do anything against it.
Or do you think something is wrong in the disabling code which is why it takes too long?
@distantnative I've an idea about that https://github.com/getkirby/kirby/pull/4654/files#r974673683