Fix Emoji Bugs

Author: mempler

src/App/Components/Chat/Chat.tsx

@@ -20,7 +20,7 @@ function Chat(props: any) {
     let messageHistory = []
 
     for (const message of channel.MessageHistory) {
-        messageHistory.push(<Message Message={message} />)
+        messageHistory.push(<Message Message={message} key={message.Id} />)
     }
 
     return (
@@ -29,7 +29,7 @@ function Chat(props: any) {
                 <defs>
                     <filter id="colorFilter">
                         <feColorMatrix 
-                            color-interpolation-filters="sRGB"
+                            colorInterpolationFilters="sRGB"
                             type="matrix"
                             values="0.12 0     0     0   0
                                     0    0.10  0     0   0

src/App/Components/Chat/Components/ChatInput/ChatInput.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 
 import "./ChatInput.scss";
 import OutsideClickHandler from "react-outside-click-handler";
-import { Picker, Emoji } from "emoji-mart";
+import { Picker, Emoji, EmojiData } from "emoji-mart";
 import { SiteStateStore } from "../../../../../Shared/Globals";
 import { SendMessage } from "../../../../../Shared/Actions/ServerActions";
 
@@ -19,12 +19,26 @@ function OnSubmitChatMessage(e: React.FormEvent<HTMLFormElement>) {
     textInput.value = "";
 }
 
+function EmojiSelected(setState: any, emoji: EmojiData)
+{
+    const textInput = document.getElementsByClassName("chatInput")[0].children[0] as HTMLInputElement;
+
+    setState({
+        IsPicking: false
+    });
+
+    textInput.value = textInput.value.trimEnd();
+    textInput.value += " " + emoji.colons + " ";
+
+    textInput.focus();
+}
+
 function ChatInput() {
     const [state, setState] = useState({
         IsPicking: false
     });
 
-    const picker = <Picker autoFocus={true} set="twitter" title="Select an Emoji..." />
+    const picker = <Picker autoFocus={true} set="twitter" title="Select an Emoji..." onSelect={e => EmojiSelected(setState, e)} />
 
     return (
         <div id="ChatInput" >

src/App/Components/Chat/Components/Message/Message.scss

@@ -62,7 +62,7 @@
       position: relative;
 
       top: 27.5px;
-
+      
       font-size: .9em;
       color: rgb(173, 173, 173);
     }

src/App/Components/Chat/Components/Message/Message.tsx

@@ -18,15 +18,14 @@ function Message(props: MessageProps) {
 
     let lastOffset = 0;
     let match = regex.exec(props.Message.Message);
-
     while (match) {
         const previousText = props.Message.Message.substring(
             lastOffset,
             match.index
         );
 
         if (previousText.length)
-            msg.push(<span className="msgPart">{previousText}</span>);
+            msg.push(<span className="msgPart" key={match.index + previousText}>{previousText}</span>);
 
         lastOffset = match.index + match[0].length;
 
@@ -38,13 +37,14 @@ function Message(props: MessageProps) {
                     return emoji ? `:${emoji.short_names[0]}:` : props.emoji
                 }) as any}
                 size={22}
+                key={match.index + lastOffset}
             />
         );
 
         if (emoji) {
             msg.push(emoji);
         } else {
-            msg.push(<span className="msgPart">{match[0]}</span>);
+            msg.push(<span key={match.index + match[0]} className="msgPart">{match[0]}</span>);
         }
 
         match = regex.exec(props.Message.Message);
@@ -53,7 +53,7 @@ function Message(props: MessageProps) {
     }
 
     if (lastOffset === 0)
-        msg.push(<span className="msgPart">{props.Message.Message}</span>);
+        msg.push(<span className="msgPart" key={props.Message.Message}>{props.Message.Message}</span>);
 
     return (
         <div id="Message" >