Add ft-input enter listener the vue way (#2879)

src/renderer/components/ft-input/ft-input.js

@@ -103,8 +103,6 @@ export default Vue.extend({
     this.id = this._uid
     this.inputData = this.value
     this.updateVisibleDataList()
-
-    setTimeout(this.addListener, 200)
   },
   methods: {
     handleClick: function (e) {
@@ -132,11 +130,10 @@ export default Vue.extend({
       this.handleActionIconChange()
       this.updateVisibleDataList()
 
-      const inputElement = document.getElementById(this.id)
-      inputElement.value = ''
+      this.$refs.input.value = ''
 
       // Focus on input element after text is clear for better UX
-      inputElement.focus()
+      this.$refs.input.focus()
 
       this.$emit('clear')
     },
@@ -190,18 +187,6 @@ export default Vue.extend({
       }
     },
 
-    addListener: function () {
-      const inputElement = document.getElementById(this.id)
-
-      if (inputElement !== null) {
-        inputElement.addEventListener('keydown', (event) => {
-          if (event.key === 'Enter') {
-            this.handleClick(event)
-          }
-        })
-      }
-    },
-
     handleOptionClick: function (index) {
       this.searchState.showOptions = false
       this.inputData = this.visibleDataList[index]

src/renderer/components/ft-input/ft-input.vue

@@ -50,6 +50,7 @@
       @focus="handleFocus"
       @blur="handleInputBlur"
       @keydown="handleKeyDown"
+      @keydown.enter="handleClick"
     >
     <font-awesome-icon
       v-if="showActionButton"