Prevent double click new issue/pull/comment button #16157

a1012112796 · 2021-06-15T04:07:31Z

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:

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 <[email protected]>

web_src/js/index.js

Co-authored-by: silverwind <[email protected]>

KN4CK3R · 2021-06-15T14:03:46Z

Almost every button should become a once-button.

silverwind · 2021-06-15T14:05:50Z

I would call it loading-button.

a1012112796 · 2021-06-15T14:16:56Z

Almost every button should become a once-button.

Sure, all button which used to post a form by default logic can use this way. Will check more latter.

lunny · 2021-06-16T02:42:05Z

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.

a1012112796 · 2021-06-16T02:55:56Z

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, timeout logic is usefull, I will check more later.

zeripath · 2021-06-21T18:53:00Z

CI failing

web_src/js/index.js

Signed-off-by: a1012112796 <[email protected]>

web_src/js/features/common-global.js

Signed-off-by: a1012112796 <[email protected]>

lafriks

Does this also will prevent with interacting with button twice using keyboard (sapcebar, enter)?

wxiaoguang · 2022-05-06T14:58:54Z

web_src/js/features/common-global.js

+  // 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;
+    }


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

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.

I think it should be generic for all use cases where technically possible and needed

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?

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?

Suggested change

// 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;

}

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.

lafriks

it should be fixed to prevent button to submit form using keyboard

wxiaoguang · 2022-05-06T15:37:50Z

it should be fixed to prevent button to submit form using keyboard

Oh sorry, maybe I didn't say clearly. To be clear:

enter on the target button triggers click, it can be handled, see the demo : https://jsfiddle.net/L0r4yxtw/1/ , enter on the button won't submit the form.
What I mean is, if user do enter on other text input fields in the form (not on the button, in such case the first button's click is triggered), or use our Ctrl+Enter to submit, then the submit might not be handled. It is another case (should it be handled in this PR?)

Is it still a change request?

lafriks · 2022-05-06T15:41:56Z

Ok, handling form submit could be handled in other PR then imho

wxiaoguang · 2022-05-06T15:47:10Z

web_src/js/features/common-global.js

+      return false;
+    }
+
+    $btn.addClass('loading disabled');


Suggested change

$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)

looks semantic ui has handled it, just add disabled class is enough.

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.

wxiaoguang

No blocker from my side.

6543 · 2022-05-07T12:23:23Z

🚀

* 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 <[email protected]>

prevent double click new issue/pull/comment button

6adb632

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 <[email protected]>

a1012112796 added the topic/ui Change the appearance of the Gitea UI label Jun 15, 2021

tomaswarynyca approved these changes Jun 15, 2021

View reviewed changes

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jun 15, 2021

silverwind reviewed Jun 15, 2021

View reviewed changes

web_src/js/index.js Outdated Show resolved Hide resolved

silverwind reviewed Jun 15, 2021

View reviewed changes

web_src/js/index.js Outdated Show resolved Hide resolved

silverwind reviewed Jun 15, 2021

View reviewed changes

web_src/js/index.js Outdated Show resolved Hide resolved

Apply suggestions from code review

f68a50f

Co-authored-by: silverwind <[email protected]>

This comment was marked as outdated.

Sign in to view

a1012112796 and others added 2 commits June 15, 2021 22:23

rename and comment

b12a87e

Merge branch 'main' into double_clicked_button

be492c2

techknowlogick approved these changes Jun 16, 2021

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jun 16, 2021

techknowlogick added this to the 1.15.0 milestone Jun 16, 2021

Merge branch 'main' into double_clicked_button

bd21494

a1012112796 marked this pull request as draft June 16, 2021 02:56

a1012112796 marked this pull request as ready for review June 16, 2021 04:51

a1012112796 requested a review from techknowlogick June 16, 2021 04:52

a1012112796 added lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jun 16, 2021

a1012112796 requested a review from silverwind June 16, 2021 04:55

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jun 21, 2021

stale bot added the issue/stale label May 2, 2022

lafriks reviewed May 2, 2022

View reviewed changes

web_src/js/index.js Outdated Show resolved Hide resolved

stale bot removed the issue/stale label May 2, 2022

a1012112796 added 2 commits May 5, 2022 10:32

Merge branch 'main' into double_clicked_button

921dad9

apply suggeston from code review @lafriks

da22521

Signed-off-by: a1012112796 <[email protected]>

lafriks reviewed May 5, 2022

View reviewed changes

web_src/js/features/common-global.js Outdated Show resolved Hide resolved

a1012112796 added 2 commits May 6, 2022 14:41

preventDefault

9fd3b09

Signed-off-by: a1012112796 <[email protected]>

Merge branch 'main' into double_clicked_button

acd8874

lafriks approved these changes May 6, 2022

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels May 6, 2022

wxiaoguang reviewed May 6, 2022

View reviewed changes

This comment was marked as off-topic.

Sign in to view

lafriks requested changes May 6, 2022

View reviewed changes

lafriks self-requested a review May 6, 2022 15:41

lafriks approved these changes May 6, 2022

View reviewed changes

wxiaoguang reviewed May 6, 2022

View reviewed changes

wxiaoguang approved these changes May 6, 2022

View reviewed changes

Merge branch 'main' into double_clicked_button

9b7bebe

6543 merged commit 672e5a7 into go-gitea:main May 7, 2022

6543 changed the title ~~prevent double click new issue/pull/comment button~~ Prevent double click new issue/pull/comment button May 7, 2022

wxiaoguang mentioned this pull request May 7, 2022

Add loading status to submit buttons #10459

Closed

a1012112796 deleted the double_clicked_button branch May 8, 2022 01:44

silverwind mentioned this pull request Aug 10, 2022

Fix loading button with invalid form #20754

Merged

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prevent double click new issue/pull/comment button #16157

Prevent double click new issue/pull/comment button #16157

a1012112796 commented Jun 15, 2021

KN4CK3R commented Jun 15, 2021

silverwind commented Jun 15, 2021

a1012112796 commented Jun 15, 2021

This comment was marked as outdated.

lunny commented Jun 16, 2021

a1012112796 commented Jun 16, 2021

zeripath commented Jun 21, 2021

lafriks left a comment •

edited

Loading

wxiaoguang May 6, 2022 •

edited

Loading

wxiaoguang May 6, 2022 •

edited

Loading

lafriks May 6, 2022

wxiaoguang May 6, 2022

a1012112796 May 6, 2022 •

edited

Loading

wxiaoguang May 6, 2022

This comment was marked as off-topic.

lafriks left a comment

wxiaoguang commented May 6, 2022 •

edited

Loading

lafriks commented May 6, 2022

wxiaoguang May 6, 2022 •

edited

Loading

a1012112796 May 6, 2022

wxiaoguang May 6, 2022

wxiaoguang left a comment

6543 commented May 7, 2022

	$btn.addClass('loading disabled');
	$btn.addClass('loading disabled');
	$btn.prop('disabled', true);

Prevent double click new issue/pull/comment button #16157

Prevent double click new issue/pull/comment button #16157

Conversation

a1012112796 commented Jun 15, 2021

KN4CK3R commented Jun 15, 2021

silverwind commented Jun 15, 2021

a1012112796 commented Jun 15, 2021

This comment was marked as outdated.

lunny commented Jun 16, 2021

a1012112796 commented Jun 16, 2021

zeripath commented Jun 21, 2021

lafriks left a comment • edited Loading

Choose a reason for hiding this comment

wxiaoguang May 6, 2022 • edited Loading

Choose a reason for hiding this comment

wxiaoguang May 6, 2022 • edited Loading

Choose a reason for hiding this comment

lafriks May 6, 2022

Choose a reason for hiding this comment

wxiaoguang May 6, 2022

Choose a reason for hiding this comment

a1012112796 May 6, 2022 • edited Loading

Choose a reason for hiding this comment

wxiaoguang May 6, 2022

Choose a reason for hiding this comment

This comment was marked as off-topic.

lafriks left a comment

Choose a reason for hiding this comment

wxiaoguang commented May 6, 2022 • edited Loading

lafriks commented May 6, 2022

wxiaoguang May 6, 2022 • edited Loading

Choose a reason for hiding this comment

a1012112796 May 6, 2022

Choose a reason for hiding this comment

wxiaoguang May 6, 2022

Choose a reason for hiding this comment

wxiaoguang left a comment

Choose a reason for hiding this comment

6543 commented May 7, 2022

lafriks left a comment •

edited

Loading

wxiaoguang May 6, 2022 •

edited

Loading

wxiaoguang May 6, 2022 •

edited

Loading

a1012112796 May 6, 2022 •

edited

Loading

wxiaoguang commented May 6, 2022 •

edited

Loading

wxiaoguang May 6, 2022 •

edited

Loading