fix(ui): Tabs > prevent middle click from pasting clipboard text into focused body (#379)

Author: EduTiyo

packages/ui/src/components/TabBar.vue

@@ -9,7 +9,8 @@
             :class="{ 'tab-active': activeTab && activeTab._id === tab._id }"
             v-for="tab in tabs"
             @click="setActiveTab(tab)"
-            @mousedown.middle.prevent="closeTab(tab)"
+            @mousedown.middle.prevent.stop
+            @mouseup.middle.prevent.stop="closeTab(tab)"
             :data-id="tab._id"
             draggable="true"
             @contextmenu.prevent="handleTabContextMenu($event, tab)"

packages/ui/tests/App_test.ts

@@ -119,3 +119,24 @@ Scenario('Test env var autocompletion', async() => {
     await checkAutocompleteInBetween('{{ca}}', '{{ca', 't', '{{cat}}')
     await checkAutocompleteInBetween('ca}}', 'ca', 't', '{{cat}}')
 })
+
+Scenario('Middle clicking a tab should not paste clipboard text into focused body', async ({ I }) => {
+    const bodyTab = '[data-testid="request-panel-tab-Body"]';
+
+    I.createRequest('Tab1');
+    I.click(bodyTab);
+
+    I.createGraphQLRequest('Tab2');
+    I.fillRequestBody
+
+    await I.fillRequestBody('Tab2 text');
+
+    I.click('.code-mirror-editor .cm-content');
+
+    await I.middleClickTab('Tab1');
+
+    I.dontSee('Tab1', '.tab');
+
+    const currentText = await I.getRequestBodyText();
+    I.expectEqual(currentText.trim() === 'Tab2 text', true);
+});

packages/ui/tests/steps_file.ts

@@ -43,5 +43,28 @@ export = function() {
             this.fillField('.code-mirror-editor .cm-content', JSON.stringify(obj))
             this.click('Done')
         },
+
+        async middleClickTab(name: string) {
+            await this.usePlaywrightTo('middle click tab', async ({ page }) => {
+                await page.locator('.tab').filter({ hasText: name }).click({ button: 'middle' });
+            });
+        },
+
+        async fillRequestBody(text: string) {
+            this.click('.code-mirror-editor .cm-content')
+            this.pressKey(['CommandOrControl', 'A'])
+            this.pressKey('Backspace')
+            this.type(text)
+        },
+
+        async getRequestBodyText() {
+            return await this.grabTextFrom('.code-mirror-editor .cm-content')
+        },
+
+        async selectAllAndCopy() {
+            this.click('.code-mirror-editor .cm-content')
+            this.pressKey(['CommandOrControl', 'A'])
+            this.pressKey(['CommandOrControl', 'C'])
+        },
     })
 }