diff --git a/public/src/client/header/chat.js b/public/src/client/header/chat.js
index 8808326bd1..21ea23018e 100644
--- a/public/src/client/header/chat.js
+++ b/public/src/client/header/chat.js
@@ -4,17 +4,16 @@ define('forum/header/chat', ['components', 'hooks'], function (components, hooks
 	const chat = {};
 
 	chat.prepareDOM = function () {
-		const chatsToggleEl = components.get('chat/dropdown');
 		const chatsListEl = components.get('chat/list');
 
-		chatsToggleEl.on('click', function () {
-			if (chatsToggleEl.parent().hasClass('open')) {
-				return;
-			}
-			requireAndCall('loadChatsDropdown', chatsListEl);
-		});
+		const chatsToggleEl = document.querySelector('[component="chat/dropdown"]');
+		if (chatsToggleEl) {
+			chatsToggleEl.addEventListener('show.bs.dropdown', () => {
+				requireAndCall('loadChatsDropdown', chatsListEl);
+			});
+		}
 
-		if (chatsToggleEl.parents('.dropdown').hasClass('open')) {
+		if (chatsToggleEl.classList.contains('show')) {
 			requireAndCall('loadChatsDropdown', chatsListEl);
 		}
 
diff --git a/public/src/modules/chat.js b/public/src/modules/chat.js
index a0c0d94ebd..9061996bb5 100644
--- a/public/src/modules/chat.js
+++ b/public/src/modules/chat.js
@@ -120,30 +120,9 @@ define('chat', [
 						}
 					});
 
-					listEl.addEventListener('click', function (e) {
-						const subselector = e.target.closest('.mark-read');
-						if (!subselector) {
-							return;
-						}
-
-						e.stopPropagation();
-						const chatEl = e.target.closest('[data-roomid]');
-						const state = !chatEl.classList.contains('unread');
-						const roomId = chatEl.getAttribute('data-roomid');
-						api[state ? 'put' : 'del'](`/chats/${roomId}/state`, {}).catch((err) => {
-							alerts.error(err);
-
-							// Revert on failure
-							chatEl.classList[state ? 'remove' : 'add']('unread');
-							chatEl.querySelector('.unread').classList[state ? 'add' : 'remove']('hidden');
-							chatEl.querySelector('.read').classList[!state ? 'add' : 'remove']('hidden');
-						});
-
-						// Immediate feedback
-						chatEl.classList[state ? 'add' : 'remove']('unread');
-						chatEl.querySelector('.unread').classList[!state ? 'add' : 'remove']('hidden');
-						chatEl.querySelector('.read').classList[state ? 'add' : 'remove']('hidden');
-					});
+					console.log('removinga dding');
+					listEl.removeEventListener('click', onMarkReadClicked);
+					listEl.addEventListener('click', onMarkReadClicked);
 
 					$('[component="chats/mark-all-read"]').off('click').on('click', function () {
 						socket.emit('modules.chats.markAllRead', function (err) {
@@ -157,6 +136,31 @@ define('chat', [
 		});
 	};
 
+	function onMarkReadClicked(e) {
+		const subselector = e.target.closest('.mark-read');
+		if (!subselector) {
+			return;
+		}
+
+		e.stopPropagation();
+		const chatEl = e.target.closest('[data-roomid]');
+		const state = !chatEl.classList.contains('unread');
+		const roomId = chatEl.getAttribute('data-roomid');
+		api[state ? 'put' : 'del'](`/chats/${roomId}/state`, {}).catch((err) => {
+			alerts.error(err);
+
+			// Revert on failure
+			chatEl.classList[state ? 'remove' : 'add']('unread');
+			chatEl.querySelector('.unread').classList[state ? 'add' : 'remove']('hidden');
+			chatEl.querySelector('.read').classList[!state ? 'add' : 'remove']('hidden');
+		});
+
+		// Immediate feedback
+		chatEl.classList[state ? 'add' : 'remove']('unread');
+		chatEl.querySelector('.unread').classList[!state ? 'add' : 'remove']('hidden');
+		chatEl.querySelector('.read').classList[state ? 'add' : 'remove']('hidden');
+	}
+
 	module.onChatMessageReceived = function (data) {
 		if (!newMessage) {
 			newMessage = data.self === 0;