imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

#248 - Unfocus chat input when clicking outside

Browse Source
This commit is contained in:
Colin Kallemein 2024-11-19 22:24:34 +01:00
parent d820490b2b
commit 8910390f7b
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/gui/Chat.vue
View File

@ -14,6 +14,7 @@
v-model="message" v-model="message"
@keypress="handleKeyPress" @keypress="handleKeyPress"
@submit="handleSubmit" @submit="handleSubmit"
ref="chatInput"
/> />
</div> </div>
</div> </div>
@ -21,6 +22,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeUnmount, ref, nextTick } from 'vue' import { onBeforeUnmount, ref, nextTick } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
import type { Chat } from '@/types' import type { Chat } from '@/types'
import { useZoneStore } from '@/stores/zoneStore' import { useZoneStore } from '@/stores/zoneStore'
@ -33,6 +35,15 @@ const zoneStore = useZoneStore()
const message = ref('') const message = ref('')
const chats = ref([] as Chat[]) const chats = ref([] as Chat[])
const chatWindow = ref<HTMLElement | null>(null) 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 = () => { const sendMessage = () => {
if (!message.value.trim()) return if (!message.value.trim()) return