From b6cc62ebfb3dc6a2e80827992cb6956a9e5c08be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20St=C3=A6rk=C3=A6r?= <jesper@superfly.tv>
Date: Tue, 16 Apr 2024 08:55:37 +0200
Subject: [PATCH] fix: changes rundown-tab selection from onClick to
 onMouseDown

To follow global UX conventions. Try clicking any tabs in any other app to verify the convention.
---
 apps/app/src/react/components/headerBar/tabs/Tabs.tsx    | 4 ++--
 apps/app/src/react/components/headerBar/tabs/tab/Tab.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/app/src/react/components/headerBar/tabs/Tabs.tsx b/apps/app/src/react/components/headerBar/tabs/Tabs.tsx
index 75228705..93e2b4f2 100644
--- a/apps/app/src/react/components/headerBar/tabs/Tabs.tsx
+++ b/apps/app/src/react/components/headerBar/tabs/Tabs.tsx
@@ -44,7 +44,7 @@ export const Tabs: React.FC<{ onTabDoubleClick: (rundown: any) => void }> = obse
 			<Tab
 				id="home"
 				name="Home"
-				onClick={() => {
+				onMouseDown={() => {
 					guiStore.goToHome()
 				}}
 				disableClose={true}
@@ -63,7 +63,7 @@ export const Tabs: React.FC<{ onTabDoubleClick: (rundown: any) => void }> = obse
 						id={rundown.rundownId}
 						name={rundown.name}
 						active={isThisSelected}
-						onClick={() => handleSelect(rundown.rundownId)}
+						onMouseDown={() => handleSelect(rundown.rundownId)}
 						onDoubleClick={() => props.onTabDoubleClick(rundown)}
 						// eslint-disable-next-line @typescript-eslint/no-misused-promises
 						onClose={async () => {
diff --git a/apps/app/src/react/components/headerBar/tabs/tab/Tab.tsx b/apps/app/src/react/components/headerBar/tabs/tab/Tab.tsx
index 4427d856..4a959416 100644
--- a/apps/app/src/react/components/headerBar/tabs/tab/Tab.tsx
+++ b/apps/app/src/react/components/headerBar/tabs/tab/Tab.tsx
@@ -8,7 +8,7 @@ export const Tab: React.FC<{
 	id: string
 	name: string
 	active?: boolean
-	onClick: () => void
+	onMouseDown: () => void
 	onDoubleClick?: () => void
 	onClose?: (id: string) => void
 	disableClose?: boolean
@@ -21,7 +21,7 @@ export const Tab: React.FC<{
 				active: props.active,
 			})}
 			title="Double-click to edit"
-			onClick={props.onClick}
+			onMouseDown={props.onMouseDown}
 			onDoubleClick={props.onDoubleClick}
 		>
 			{props.icon && <div className="icon">{props.icon}</div>}