-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Prevent double click new issue/pull/comment button #16157
Conversation
when network is not good, these button maybe double clicked, then more than one same issues pulls or comments will be created. this pull request will fix this bug. Signed-off-by: a1012112796 <1012112796@qq.com>
Co-authored-by: silverwind <me@silverwind.io>
Almost every button should become a |
I would call it |
Sure, all button which used to post a form by default logic can use this way. Will check more latter. |
This comment was marked as outdated.
This comment was marked as outdated.
Since almost button clicked will refresh the page, I think it's suitable. But once we convert to an ajax request button. It should be changed. @jolheiser has a similar PR #10459, but I think this one is better. |
Hmm, |
CI failing |
Signed-off-by: a1012112796 <1012112796@qq.com>
Signed-off-by: a1012112796 <1012112796@qq.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this also will prevent with interacting with button twice using keyboard (sapcebar, enter)?
// loading-button this logic used to prevent push one form more than one time | ||
$(document).on('click', '.button.loading-button', function (e) { | ||
const $btn = $(this); | ||
|
||
if ($btn.hasClass('loading')) { | ||
e.preventDefault(); | ||
return false; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you need capture instead of bubble here. Otherwise the event handler on the button would be executed first (for example: ajax, IIRC some form buttons are doing ajax requests)
https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To be clear, what I mean is:
If we are trying to introduce a general method, should the all cases be considered together? Will this mechanism be used for ajax buttons in future?
-
If this mechanism is for traditional forms (non-ajax) only, these CSS names are too broad, it will be mis-used by ajax buttons in future.
-
If this mechanism is for both traditional forms and ajax requests, it could be fine tuned some more.
update: I would suggest to use form-once-submit
as the CSS name for these form-only buttons.
In future, we can have ajax-once-request
CSS class for ajax buttons (if necessary), or ajax buttons should handle the repeated clicks by themselves.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it should be generic for all use cases where technically possible and needed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Either is fine to me:
- Make the CSS name in this PR clear for only traditional
form
buttons, and get this PR merged. - (OR) Let's spend some more time to fine tune some more.
How do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Either is fine to me:
- Make the CSS name in this PR clear for only traditional
form
buttons, and get this PR merged.- (OR) Let's spend some more time to fine tune some more.
How do you think?
how about limit it by this way?
// loading-button this logic used to prevent push one form more than one time | |
$(document).on('click', '.button.loading-button', function (e) { | |
const $btn = $(this); | |
if ($btn.hasClass('loading')) { | |
e.preventDefault(); | |
return false; | |
} | |
// loading-button this logic used to prevent push one form more than one time | |
// like double create new issue , pull request or comments | |
$(document).on('click', 'form .button.loading-button', function (e) { | |
const $btn = $(this); | |
if ($btn.hasClass('loading')) { | |
e.preventDefault(); | |
return false; | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
loading-button
is not a proper name ......
If you are reading some code, when you see a button called loading-button
, you might think it is a button which is loading something. BUT, the purpose of the class is to make the button can only submit the form once.
I would suggest to use a clear name to reduce misunderstanding.
This comment was marked as off-topic.
This comment was marked as off-topic.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it should be fixed to prevent button to submit form using keyboard
Oh sorry, maybe I didn't say clearly. To be clear:
Is it still a change request? |
Ok, handling form submit could be handled in other PR then imho |
return false; | ||
} | ||
|
||
$btn.addClass('loading disabled'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
$btn.addClass('loading disabled'); | |
$btn.addClass('loading disabled'); | |
$btn.prop('disabled', true); |
Should we use $btn.prop('disabled', true);
to disable the button entirely? Then it's not clickable anymore, and we do not need to check .loading
anymore, and no need to return false (preventDefault)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks semantic ui has handled it, just add disabled
class is enough.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But what if it is not a Fomantic UI button? For example, what if some one writes a form without .ui
class but uses your code?
If you require the developers to use your code in Fomantic UI context, you should change the selector to .ui.button .xxxxxx
to make sure the code only works for Fomantic UI.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No blocker from my side.
🚀 |
* giteaofficial/main: Delete related PullAutoMerge and ReviewState on User/Repo Deletion (go-gitea#19649) Allow custom default merge message with .gitea/default_merge_message/<merge_style>_TEMPLATE.md (go-gitea#18177) Allow to mark files in a PR as viewed (go-gitea#19007) Auto merge pull requests when all checks succeeded via API (go-gitea#9307) Hide private repositories in packages (go-gitea#19584) Only show accessible teams in dashboard dropdown list (go-gitea#19642) prevent double click new issue/pull/comment button (go-gitea#16157) Improve reviewing PR UX (go-gitea#19612) [skip ci] Updated translations via Crowdin Add Changelog v1.16.7 (go-gitea#19575) (go-gitea#19644) Set safe dir for git operations in .drone.yml CI (go-gitea#19641) Add missing `sorting` column in `project_issue` table (go-gitea#19635)
* prevent double click new issue/pull/comment button when network is not good, these button maybe double clicked, then more than one same issues pulls or comments will be created. this pull request will fix this bug. Signed-off-by: a1012112796 <1012112796@qq.com>
when network is not good, these button maybe
double clicked, then more than one same issues
pulls or comments will be created. this pull
request will fix this bug.
Before:
Now: