From 8910390f7b96ca13f732283b45ae6d618dabb172 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Tue, 19 Nov 2024 22:24:34 +0100
Subject: [PATCH] #248 - Unfocus chat input when clicking outside

---
 src/components/gui/Chat.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index caa8f7f..81363cf 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -14,6 +14,7 @@
         v-model="message"
         @keypress="handleKeyPress"
         @submit="handleSubmit"
+        ref="chatInput"
       />
     </div>
   </div>
@@ -21,6 +22,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref, nextTick } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { useGameStore } from '@/stores/gameStore'
 import type { Chat } from '@/types'
 import { useZoneStore } from '@/stores/zoneStore'
@@ -33,6 +35,15 @@ const zoneStore = useZoneStore()
 const message = ref('')
 const chats = ref([] as Chat[])
 const chatWindow = ref<HTMLElement | null>(null)
+const chatInput = ref<HTMLElement | null>(null)
+
+onClickOutside(chatInput, event => unfocusChat(event, chatInput.value as HTMLElement))
+
+function unfocusChat(event: Event, targetElement: HTMLElement) {
+  if (!(event.target instanceof Node) || !targetElement.contains(event.target)) {
+    targetElement.blur();
+  }
+}
 
 const sendMessage = () => {
   if (!message.value.trim()) return