starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-25 16:55:59 +03:00

[GH-ISSUE #4134] [bug]: Multiple collections/requests can be created on repeated Enter key presses from the create modal #1481

New issue

Closed

opened 2026-03-16 20:28:59 +03:00 by kerem · 9 comments

kerem commented

2026-03-16 20:28:59 +03:00

Owner

Originally created by @jamesgeorge007 on GitHub (Jun 20, 2024).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4134

Originally assigned to: @xLansang on GitHub.

Is there an existing issue for this?

I have searched the existing issues

Current behavior

While creating collections/requests in a team workspace, repeatedly pressing the enter key while at the create collection modal will create multiple collections/requests. The click action on the button is disabled during the loading state, which should also be extended to the keypress action.

Steps to reproduce

Open a team workspace
Click + New from the collection panel to create a new root collection.
When the modal opens, give it a name
On clicking save, press enter multiple times till the modal closes
Duplicates of the same collection are created. The number of them created equals the number of times you pressed the Enter key before the modal closed.

This applies to creating folders/requests as demonstrated in the recording below.

https://github.com/hoppscotch/hoppscotch/assets/25279263/da9e3c38-5402-410c-9ffa-7413a99ade6f

While working on a fix, ensure to verify the create collection action via spotlight which opens the same modal.

Environment

Production

Version

Applicable to both Cloud & SH

Originally created by @jamesgeorge007 on GitHub (Jun 20, 2024). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4134 Originally assigned to: @xLansang on GitHub. ### Is there an existing issue for this? - [X] I have searched the existing issues ### Current behavior While creating collections/requests in a team workspace, repeatedly pressing the enter key while at the create collection modal will create multiple collections/requests. The click action on the button is disabled during the loading state, which should also be extended to the keypress action. ### Steps to reproduce 1. Open a team workspace 2. Click `+ New` from the collection panel to create a new root collection. 3. When the modal opens, give it a name 4. On clicking save, press enter multiple times till the modal closes 5. Duplicates of the same collection are created. The number of them created equals the number of times you pressed the Enter key before the modal closed. This applies to creating folders/requests as demonstrated in the recording below. https://github.com/hoppscotch/hoppscotch/assets/25279263/da9e3c38-5402-410c-9ffa-7413a99ade6f > While working on a fix, ensure to verify the create collection action via [spotlight](https://docs.hoppscotch.io/documentation/features/spotlight#spotlight) which opens the same modal. ### Environment Production ### Version Applicable to both Cloud & SH

kerem

2026-03-16 20:28:59 +03:00

closed this issue
added the
bug

good first issue
labels

kerem commented

2026-03-16 20:29:15 +03:00

Author

Owner

@xLansang commented on GitHub (Oct 8, 2024):

Hello! i'd love to take this issue on. Please let me know if I can be assigned.

@xLansang commented on GitHub (Oct 8, 2024): Hello! i'd love to take this issue on. Please let me know if I can be assigned.

kerem commented

2026-03-16 20:29:20 +03:00

Author

Owner

@SanskritiHarmukh commented on GitHub (Oct 9, 2024):

Hey @xLansang , Thank you for showing interest. Assigning the issue to you.

@SanskritiHarmukh commented on GitHub (Oct 9, 2024): Hey @xLansang , Thank you for showing interest. Assigning the issue to you.

kerem commented

2026-03-16 20:29:25 +03:00

Author

Owner

@xLansang commented on GitHub (Oct 10, 2024):

Sounds great, I'll keep you updated on my progress!

@xLansang commented on GitHub (Oct 10, 2024): Sounds great, I'll keep you updated on my progress!

kerem commented

2026-03-16 20:29:30 +03:00

Author

Owner

@ayushmatkar commented on GitHub (Oct 10, 2024):

Hii, I would love to work on this issue. Please let me know if it is to be assigned later anytime.

@ayushmatkar commented on GitHub (Oct 10, 2024): Hii, I would love to work on this issue. Please let me know if it is to be assigned later anytime.

kerem commented

2026-03-16 20:29:36 +03:00

Author

Owner

@xLansang commented on GitHub (Oct 17, 2024):

Hello @jamesgeorge007. my solution is to add these two lines in the primary.vue file in the ui repository. My understanding is that this file contains the implementation for the "HoppButtonPrimary" button. This is my first time coding in typescript, so I wanted to test if the implementation is correct. Please let me know if I am missing something or if this would possibly cause issues.

@xLansang commented on GitHub (Oct 17, 2024): Hello @jamesgeorge007. my solution is to add these two lines in the primary.vue file in the ui repository. My understanding is that this file contains the implementation for the "HoppButtonPrimary" button. This is my first time coding in typescript, so I wanted to test if the implementation is correct. Please let me know if I am missing something or if this would possibly cause issues. ![image](https://github.com/user-attachments/assets/10340c2e-30ec-4bfc-ba14-e09c327bfcce)

kerem commented

2026-03-16 20:29:41 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Oct 21, 2024):

Hi @xLansang, this issue arises in modals comprising an input element and a primary action button. There are two possibilities here where the primary action gets invoked multiple times via repeated Enter key presses:

The input element (HoppSmartInput component) is in focus where the submit event is triggered.
The primary button (HoppButtonPrimary component) is in focus where the click event is triggered.

An ideal fix here accounting for the above cases is to prevent invoking the primary action for the second time if in the loading state.

Also, thanks for the PR. Given the above concern with the HoppButtonPrimary component, it's nice to handle things at the source. We'll evaluate and handle it appropriately in a later iteration.

Given below are the possible scenarios where an early return needs to be added (A prop/local state variable indicating loading state is in scope):

Creating a root collection

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/Add.vue (L9-L15)

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/Add.vue (L19-L24)

if (props.loadingState) {
   return
}

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/Add.vue (L71-L78)

Creating a folder/child collection

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/AddFolder.vue (L71-L77)

Creating a request

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/AddRequest.vue (L168-L174)

Editing a root collection

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/Edit.vue (L70-L78)

Editing a folder

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/EditFolder.vue (L71-L78)

Editing a request

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/collections/EditRequest.vue (L156-L163)

Creating/editing environment entries

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/environments/teams/Details.vue (L354-L362)

Creating a new workspace

github.com/hoppscotch/hoppscotch@9da5f63e70/packages/hoppscotch-common/src/components/teams/Add.vue (L65-L66)

Feel free to raise a PR accounting for the above cases :)

@jamesgeorge007 commented on GitHub (Oct 21, 2024): Hi @xLansang, this issue arises in modals comprising an input element and a primary action button. There are two possibilities here where the primary action gets invoked multiple times via repeated `Enter` key presses: 1. The input element ([`HoppSmartInput` component](https://github.com/hoppscotch/ui/blob/main/src/components/smart/Input.vue)) is in focus where the `submit` event is triggered. 2. The primary button ([`HoppButtonPrimary` component](https://github.com/hoppscotch/ui/blob/main/src/components/button/Primary.vue)) is in focus where the `click` event is triggered. An ideal fix here accounting for the above cases is to prevent invoking the primary action for the second time if in the loading state. Also, thanks for the [PR](https://github.com/hoppscotch/ui/pull/32). Given the above concern with the `HoppButtonPrimary` component, it's nice to handle things at the source. We'll evaluate and handle it appropriately in a later iteration. Given below are the possible scenarios where an early return needs to be added (A prop/local state variable indicating loading state is in scope): > Creating a root collection https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/Add.vue#L9-L15 https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/Add.vue#L19-L24 ```ts if (props.loadingState) { return } ``` https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/Add.vue#L71-L78 > Creating a folder/child collection https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/AddFolder.vue#L71-L77 > Creating a request https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/AddRequest.vue#L168-L174 > Editing a root collection https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/Edit.vue#L70-L78 > Editing a folder https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/EditFolder.vue#L71-L78 > Editing a request https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/collections/EditRequest.vue#L156-L163 > Creating/editing environment entries https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/environments/teams/Details.vue#L354-L362 > Creating a new workspace https://github.com/hoppscotch/hoppscotch/blob/9da5f63e701ba072ea393e68847d7f8e395d4c4a/packages/hoppscotch-common/src/components/teams/Add.vue#L65-L66 Feel free to raise a PR accounting for the above cases :)

kerem commented

2026-03-16 20:29:46 +03:00

Author

Owner

@xLansang commented on GitHub (Oct 21, 2024):

Hello @jamesgeorge007, thanks for the response! I see this approach handles both scenarios where either the smartInput or PrimaryButton is in focus. I'll raise a PR now accounting for the above cases using this approach.

@xLansang commented on GitHub (Oct 21, 2024): Hello @jamesgeorge007, thanks for the response! I see this approach handles both scenarios where either the smartInput or PrimaryButton is in focus. I'll raise a PR now accounting for the above cases using this approach.

kerem commented

2026-03-16 20:29:51 +03:00

Author

Owner

@SanskritiHarmukh commented on GitHub (Oct 26, 2024):

Hey @jamesgeorge007 , is this issue completely resolved? Should we go ahead and close it?

@SanskritiHarmukh commented on GitHub (Oct 26, 2024): Hey @jamesgeorge007 , is this issue completely resolved? Should we go ahead and close it?

kerem commented

2026-03-16 20:29:56 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Oct 27, 2024):

The PR has been merged and scheduled for the upcoming major release. I was thinking of closing the issue once the release is out, but we can go ahead and close this now.

@jamesgeorge007 commented on GitHub (Oct 27, 2024): The PR has been merged and scheduled for the upcoming major release. I was thinking of closing the issue once the release is out, but we can go ahead and close this now.

kerem referenced this issue

2026-03-17 00:57:59 +03:00

[PR #1481] [MERGED] Feature: Teams new UI settings isha #3343