starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-26 01:06:00 +03:00

[GH-ISSUE #5380] [bug]: Reordering Headers and Params #2062

New issue

Closed

opened 2026-03-16 23:02:51 +03:00 by kerem · 3 comments

kerem commented

2026-03-16 23:02:51 +03:00

Owner

Originally created by @aakashsbhatia2 on GitHub (Sep 8, 2025).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/5380

Originally assigned to: @aakashsbhatia2 on GitHub.

Is there an existing issue for this?

I have searched existing issues and this bug hasn't been reported yet

Platform

Web App

Browser

Firefox

Operating System

Linux

Bug Description

When the headers and query params are reordered in HTTP requests/ graphQL, I am able to generate multiple empty entries.

Steps to reproduce

Add a new header or query param
Drag the header below the last empty line in the list of headers
You will notice that a new empty header entry is created.

https://github.com/user-attachments/assets/499f21a0-bd22-4824-86fa-faea3ebecc5c

What I expect

I would expect that the UI should not allow the header to be placed below the last empty header.

Analysis

I think this is happening because:

There is no check to decide whether the drag operation should be allowed
The following code is appending a new line each time a line is dragged to the end of the list

// Rule: Working Headers always have last element is always an empty header
watch(workingHeaders, (headersList) => {
  if (
    headersList.length > 0 &&
    headersList[headersList.length - 1].key !== ""
  ) {
    workingHeaders.value.push({
      id: idTicker.value++,
      key: "",
      value: "",
      active: true,
      description: "",
    })
  }
})

Proposed Solution

I have a working solution. If the following is a reasonable fix, I can raise the PR. I am new to this repo so any feedback here would be greatly appreciated!

I fixed this by using a function to check if the move should be allowed

<draggable
        v-model="workingHeaders"
        :item-key="(header: WorkingHeader) => `header-${header.id}`"
        animation="250"
        handle=".draggable-handle"
        draggable=".draggable-content"
        ghost-class="cursor-move"
        chosen-class="bg-primaryLight"
        drag-class="cursor-grabbing"
        :move="checkMove" <================================= check if move is allowed
>
        <template #item="{ element: header, index }">
          <HttpKeyValue
            v-model:name="header.key"
            v-model:value="header.value"
            v-model:description="header.description"
            :total="workingHeaders.length"
            :index="index"
            :entity-id="header.id"
            :entity-active="header.active"
            :envs="envs"
            :is-active="header.hasOwnProperty('active')"
            :inspection-key-result="getInspectorResult(headerKeyResults, index)"
            :inspection-value-result="
              getInspectorResult(headerValueResults, index)
            "
            :key-auto-complete-source="commonHeaders"
            @update-entity="updateHeader($event.index, $event.payload)"
            @delete-entity="deleteHeader($event)"
          />
        </template>
</draggable>


// Function to check move
function checkMove(event) {
  const futureIndex = event?.draggedContext?.futureIndex;
  const workingHeadersLength = workingHeaders?.value?.length;

  if (isNaN(futureIndex) || isNaN(workingHeadersLength)) return false;

  if (futureIndex >= workingHeadersLength - 1) return false;
  return true;
}

After fix

https://github.com/user-attachments/assets/9ce445b9-115f-4922-a316-4aa03762628a

Deployment Type

Self-hosted (on-prem deployment)

Version

No response

Originally created by @aakashsbhatia2 on GitHub (Sep 8, 2025). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/5380 Originally assigned to: @aakashsbhatia2 on GitHub. ### Is there an existing issue for this? - [x] I have searched existing issues and this bug hasn't been reported yet ### Platform Web App ### Browser Firefox ### Operating System Linux ### Bug Description When the headers and query params are reordered in HTTP requests/ graphQL, I am able to generate multiple empty entries. ## Steps to reproduce 1. Add a new header or query param 2. Drag the header below the last empty line in the list of headers 3. You will notice that a new empty header entry is created. https://github.com/user-attachments/assets/499f21a0-bd22-4824-86fa-faea3ebecc5c ## What I expect I would expect that the UI should not allow the header to be placed below the last empty header. ## Analysis I think this is happening because: - There is no check to decide whether the drag operation should be allowed - The following code is appending a new line each time a line is dragged to the end of the list ``` // Rule: Working Headers always have last element is always an empty header watch(workingHeaders, (headersList) => { if ( headersList.length > 0 && headersList[headersList.length - 1].key !== "" ) { workingHeaders.value.push({ id: idTicker.value++, key: "", value: "", active: true, description: "", }) } }) ``` ## Proposed Solution I have a working solution. If the following is a reasonable fix, I can raise the PR. I am new to this repo so any feedback here would be greatly appreciated! I fixed this by using a function to check if the move should be allowed ``` <draggable v-model="workingHeaders" :item-key="(header: WorkingHeader) => `header-${header.id}`" animation="250" handle=".draggable-handle" draggable=".draggable-content" ghost-class="cursor-move" chosen-class="bg-primaryLight" drag-class="cursor-grabbing" :move="checkMove" <================================= check if move is allowed > <template #item="{ element: header, index }"> <HttpKeyValue v-model:name="header.key" v-model:value="header.value" v-model:description="header.description" :total="workingHeaders.length" :index="index" :entity-id="header.id" :entity-active="header.active" :envs="envs" :is-active="header.hasOwnProperty('active')" :inspection-key-result="getInspectorResult(headerKeyResults, index)" :inspection-value-result=" getInspectorResult(headerValueResults, index) " :key-auto-complete-source="commonHeaders" @update-entity="updateHeader($event.index, $event.payload)" @delete-entity="deleteHeader($event)" /> </template> </draggable> // Function to check move function checkMove(event) { const futureIndex = event?.draggedContext?.futureIndex; const workingHeadersLength = workingHeaders?.value?.length; if (isNaN(futureIndex) || isNaN(workingHeadersLength)) return false; if (futureIndex >= workingHeadersLength - 1) return false; return true; } ``` ### After fix https://github.com/user-attachments/assets/9ce445b9-115f-4922-a316-4aa03762628a ### Deployment Type Self-hosted (on-prem deployment) ### Version _No response_

kerem

2026-03-16 23:02:51 +03:00

closed this issue
added the
bug
label

kerem commented

2026-03-16 23:03:07 +03:00

Author

Owner

@nivedin commented on GitHub (Sep 10, 2025):

@aakashsbhatia2 this fix work please open a PR

@nivedin commented on GitHub (Sep 10, 2025): @aakashsbhatia2 this fix work please open a PR

kerem commented

2026-03-16 23:03:12 +03:00

Author

Owner

@aakashsbhatia2 commented on GitHub (Sep 11, 2025):

@aakashsbhatia2 this fix work please open a PR

Done!

@aakashsbhatia2 commented on GitHub (Sep 11, 2025): > [@aakashsbhatia2](https://github.com/aakashsbhatia2) this fix work please open a PR Done!

kerem commented

2026-03-16 23:03:17 +03:00

Author

Owner

@liyasthomas commented on GitHub (Sep 29, 2025):

The latest version of Hoppscotch has resolved this bug.

@liyasthomas commented on GitHub (Sep 29, 2025): The latest version of Hoppscotch has resolved this bug.