2 files changed, 4 insertions, 2 deletions
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index ce82c90d..e6f9dbff 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,6 +1,7 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
+import { trim } from 'lodash'
 
 library.add(faSmileBeam)
 
@@ -43,7 +44,7 @@ const ReactButton = {
     },
     emojis () {
       if (this.filterWord !== '') {
-        const filterWordLowercase = this.filterWord.toLowerCase()
+        const filterWordLowercase = trim(this.filterWord.toLowerCase())
         let orderedEmojiList = []
         for (const emoji of this.$store.state.instance.emoji) {
           if (emoji.replacement === this.filterWord) return [emoji]
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..8a4b4d3b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -12,6 +12,7 @@
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
+          @input="$event.target.composing = false"
           size="1"
           :placeholder="$t('emoji.search_emoji')"
         >
@@ -101,7 +102,7 @@
       cursor: pointer;
 
       flex-basis: 20%;
-      line-height: 1.5em;
+      line-height: 1.5;
       align-content: center;
 
       &:hover {