From 95af568653f7db8996a1368cf36983932a7ab949 Mon Sep 17 00:00:00 2001 From: GRL78 <80678534+GRL78@users.noreply.github.com> Date: Tue, 27 Jul 2021 14:28:35 +0200 Subject: [PATCH] Link will now be white and underline + Click on the game to lose focus of input field (#1315) * Link will now be white and underline Click on the game to lose focus of input field * Use bind:this instead of querySelector Add isClickedInside and isClickedOutside to HtmlUtils to know if the user click inside/outside an element targeted --- front/src/Components/Chat/Chat.svelte | 17 +++++++++++++---- front/src/Components/Chat/ChatElement.svelte | 3 ++- .../src/Components/Chat/ChatMessageForm.svelte | 8 +++++++- front/src/WebRtc/HtmlUtils.ts | 11 ++++++++++- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/front/src/Components/Chat/Chat.svelte b/front/src/Components/Chat/Chat.svelte index e39d1a59..a636205b 100644 --- a/front/src/Components/Chat/Chat.svelte +++ b/front/src/Components/Chat/Chat.svelte @@ -3,9 +3,12 @@ import { chatMessagesStore, chatVisibilityStore } from "../../Stores/ChatStore"; import ChatMessageForm from './ChatMessageForm.svelte'; import ChatElement from './ChatElement.svelte'; - import { afterUpdate, beforeUpdate } from "svelte"; + import {afterUpdate, beforeUpdate} from "svelte"; + import {HtmlUtils} from "../../WebRtc/HtmlUtils"; let listDom: HTMLElement; + let chatWindowElement: HTMLElement; + let handleFormBlur: { blur():void }; let autoscroll: boolean; beforeUpdate(() => { @@ -16,6 +19,12 @@ if (autoscroll) listDom.scrollTo(0, listDom.scrollHeight); }); + function onClick(event: MouseEvent) { + if (HtmlUtils.isClickedOutside(event, chatWindowElement)) { + handleFormBlur.blur(); + } + } + function closeChat() { chatVisibilityStore.set(false); } @@ -26,10 +35,10 @@ } - + -