rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-11 09:51:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(request-tabs): prevent browser autoscroll on middle-button mouse actions (#7443)

Browse Source 
Added event handlers to prevent the browser's autoscroll behavior when the middle mouse button is pressed in the ExampleTab and RequestTab components. This improves user experience by avoiding unintended scrolling during tab interactions.
This commit is contained in:
Abhishek S Lal
2026-04-01 21:36:31 +05:30
committed by GitHub
parent 64bdef23ec
commit d73e01993d
2 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
View File

@@ -43,6 +43,13 @@ const ExampleTab = ({ tab, collection }) => {
}
};
// Prevent the browser's autoscroll (triggered on middle-button mousedown)
const handleMouseDown = (e) => {
if (e.button === 1) {
e.preventDefault();
}
};
const handleMouseUp = (e) => {
if (e.button === 1) {
e.preventDefault();
@@ -59,6 +66,7 @@ const ExampleTab = ({ tab, collection }) => {
return (
<StyledWrapper
className="flex items-center justify-between tab-container"
onMouseDown={handleMouseDown}
onMouseUp={(e) => {
if (e.button === 1) {
e.preventDefault();
@@ -105,6 +113,7 @@ const ExampleTab = ({ tab, collection }) => {
className={`flex items-center tab-label ${tab.preview ? 'italic' : ''}`}
onContextMenu={handleRightClick}
onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
onMouseDown={handleMouseDown}
onMouseUp={(e) => {
if (!hasChanges) return handleMouseUp(e);

10
packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
View File

@@ -103,6 +103,13 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
menuDropdownRef.current?.show();
};
// Prevent the browser's autoscroll (triggered on middle-button mousedown)
const handleMouseDown = (e) => {
if (e.button === 1) {
e.preventDefault();
}
};
const handleMouseUp = (e) => {
if (e.button === 1) {
e.preventDefault();
@@ -260,6 +267,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
return (
<StyledWrapper
className={`flex items-center justify-between tab-container px-2 ${tab.preview ? 'italic' : ''}`}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
>
{showConfirmCollectionClose && tab.type === 'collection-settings' && (
@@ -447,6 +455,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
return (
<StyledWrapper
className="flex items-center justify-between tab-container"
onMouseDown={handleMouseDown}
onMouseUp={(e) => {
if (e.button === 1) {
e.preventDefault();
@@ -503,6 +512,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
className={`flex items-baseline tab-label ${tab.preview ? 'italic' : ''}`}
onContextMenu={handleRightClick}
onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
onMouseDown={handleMouseDown}
onMouseUp={(e) => {
if (!hasChanges) return handleMouseUp(e);