From 5253bcbea715fd7de3f084a9bb3e695be9163d27 Mon Sep 17 00:00:00 2001
From: Martin Schoeler <martin.schoeler@rocket.chat>
Date: Tue, 23 Jul 2024 22:56:28 -0300
Subject: [PATCH] fix: Sidebar scrolling misclick issue on iOS (#32769)

---
 .changeset/red-vans-shave.md                    |  5 +++++
 apps/meteor/client/polyfills/hoverTouchClick.ts | 17 -----------------
 apps/meteor/client/polyfills/index.ts           |  1 -
 .../RoomList/SideBarItemTemplateWithData.tsx    |  2 ++
 .../RoomList/SideBarItemTemplateWithData.tsx    |  2 ++
 5 files changed, 9 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/red-vans-shave.md
 delete mode 100644 apps/meteor/client/polyfills/hoverTouchClick.ts

diff --git a/.changeset/red-vans-shave.md b/.changeset/red-vans-shave.md
new file mode 100644
index 0000000000000..ddf76535087e0
--- /dev/null
+++ b/.changeset/red-vans-shave.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed issue that caused unintentional clicks when scrolling the channels sidebar on safari/chrome in iOS
diff --git a/apps/meteor/client/polyfills/hoverTouchClick.ts b/apps/meteor/client/polyfills/hoverTouchClick.ts
deleted file mode 100644
index 53706a45fb33b..0000000000000
--- a/apps/meteor/client/polyfills/hoverTouchClick.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as domEvents from '../lib/utils/domEvents';
-import { isIOsDevice } from '../lib/utils/isIOsDevice';
-
-((): void => {
-	if (!isIOsDevice || !window.matchMedia('(hover: none)').matches) {
-		return;
-	}
-
-	domEvents.delegate({
-		parent: document.body,
-		eventName: 'touchend',
-		elementSelector: 'a:hover',
-		listener: (_, element): void => {
-			domEvents.triggerClick(element);
-		},
-	});
-})();
diff --git a/apps/meteor/client/polyfills/index.ts b/apps/meteor/client/polyfills/index.ts
index bc91265b04ba9..be470f261e265 100644
--- a/apps/meteor/client/polyfills/index.ts
+++ b/apps/meteor/client/polyfills/index.ts
@@ -3,5 +3,4 @@ import 'url-polyfill';
 import './childNodeRemove';
 import './cssVars';
 import './customEventPolyfill';
-import './hoverTouchClick';
 import './promiseFinally';
diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
index f9ec077e9e430..cc7cdfbe7761a 100644
--- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
+++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
@@ -8,6 +8,7 @@ import React, { memo, useMemo } from 'react';
 
 import { RoomIcon } from '../../components/RoomIcon';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
+import { isIOsDevice } from '../../lib/utils/isIOsDevice';
 import { useOmnichannelPriorities } from '../../omnichannel/hooks/useOmnichannelPriorities';
 import RoomMenu from '../RoomMenu';
 import { OmnichannelBadges } from '../badges/OmnichannelBadges';
@@ -195,6 +196,7 @@ function SideBarItemTemplateWithData({
 			avatar={AvatarTemplate && <AvatarTemplate {...room} />}
 			actions={actions}
 			menu={
+				!isIOsDevice &&
 				!isAnonymous &&
 				(!isQueued || (isQueued && isPriorityEnabled)) &&
 				((): ReactElement => (
diff --git a/apps/meteor/client/sidebarv2/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebarv2/RoomList/SideBarItemTemplateWithData.tsx
index 60444540f6fd0..4eaba8cc37f04 100644
--- a/apps/meteor/client/sidebarv2/RoomList/SideBarItemTemplateWithData.tsx
+++ b/apps/meteor/client/sidebarv2/RoomList/SideBarItemTemplateWithData.tsx
@@ -8,6 +8,7 @@ import React, { memo, useMemo } from 'react';
 
 import { RoomIcon } from '../../components/RoomIcon';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
+import { isIOsDevice } from '../../lib/utils/isIOsDevice';
 import { useOmnichannelPriorities } from '../../omnichannel/hooks/useOmnichannelPriorities';
 import RoomMenu from '../RoomMenu';
 import { OmnichannelBadges } from '../badges/OmnichannelBadges';
@@ -195,6 +196,7 @@ const SideBarItemTemplateWithData = ({
 			avatar={AvatarTemplate && <AvatarTemplate {...room} />}
 			actions={actions}
 			menu={
+				!isIOsDevice &&
 				!isAnonymous &&
 				(!isQueued || (isQueued && isPriorityEnabled)) &&
 				((): ReactElement => (