slight changes

client/package.json

@@ -33,6 +33,7 @@
     "v-tooltip": "^2.0.3",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-clickaway": "^2.2.2",
     "vue-context": "^5.0.0",
     "vue-notification": "^1.3.20",
     "vue-property-decorator": "^8.3.0",
@@ -42,6 +43,7 @@
     "@types/animejs": "^3.1.0",
     "@types/node": "^13.7.0",
     "@types/vue": "^2.0.0",
+    "@types/vue-clickaway": "^2.2.0",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
     "@vue/cli-plugin-typescript": "^4.1.0",

client/src/components/chat.vue

@@ -35,15 +35,9 @@
     <div v-if="!muted" class="chat-send">
       <div class="accent" />
       <div class="text-container">
-        <textarea
+        <textarea ref="input" placeholder="Send a message" @keydown="onKeyDown" v-model="content" />
-          ref="input"
+        <neko-emoji v-if="emoji" @picked="onEmojiPicked" @done="emoji = false" />
-          placeholder="Send a message"
+        <i class="emoji-menu fas fa-laugh" @click.stop.prevent="onEmoji"></i>
-          @keydown="onKeyDown"
-          v-model="content"
-          @click.stop.prevent="emoji = false"
-        />
-        <neko-emoji v-if="emoji" @picked="onEmojiPicked" />
-        <i class="emoji-menu fas fa-laugh" @click.stop.prevent="emoji = !emoji"></i>
       </div>
     </div>
   </div>
@@ -330,6 +324,8 @@
   import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
   import { formatRelative } from 'date-fns'
 
+  import { Member } from '~/neko/types'
+
   import Markdown from './markdown'
   import Content from './context.vue'
   import Emoji from './emoji.vue'
@@ -371,11 +367,6 @@
       })
     }
 
-    @Watch('emoji')
-    onEmojiChange() {
-      this._input.focus()
-    }
-
     @Watch('muted')
     onMutedChange(muted: boolean) {
       if (muted) {
@@ -398,6 +389,11 @@
       return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
     }
 
+    onEmoji() {
+      this.emoji = !this.emoji
+      this._input.focus()
+    }
+
     onEmojiPicked(emoji: string) {
       const text = `:${emoji}:`
       if (this._input.selectionStart || this._input.selectionStart === 0) {
@@ -411,11 +407,15 @@
       } else {
         this.content += text
       }
+      this._input.focus()
       this.emoji = false
     }
 
-    onContext(event: MouseEvent, data: any) {
+    onContext(event: MouseEvent, { member }: { member: Member }) {
-      this._context.open(event, data)
+      if (member.id === this.id) {
+        return
+      }
+      this._context.open(event, { member })
     }
 
     onClick(event: { target?: HTMLElement; preventDefault(): void }) {

client/src/components/emoji.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="neko-emoji">
+  <div class="neko-emoji" v-on-clickaway="onClickAway">
     <div class="search">
       <div class="search-contianer">
         <input type="text" ref="search" v-model="search" />
@@ -288,11 +288,14 @@
 
 <script lang="ts">
   import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
-
+  import { directive as onClickaway } from 'vue-clickaway'
   import { get, set } from '../utils/localstorage'
 
   @Component({
     name: 'neko-emoji',
+    directives: {
+      onClickaway,
+    },
   })
   export default class extends Vue {
     @Ref('scroll') readonly _scroll!: HTMLElement
@@ -378,5 +381,9 @@
       this.$accessor.emoji.setRecent(emoji)
       this.$emit('picked', emoji)
     }
+
+    onClickAway(event: MouseEvent) {
+      this.$emit('done')
+    }
   }
 </script>