Focus in input after text clear (#1669)

* * Focus in input after text clear

* "makes the button disappear after clicking"

* animation

* Fix button title text

* Really remove/hide the button after CSS animation

* Fix hovered button overlapping text input box

* Fix incorrect initial value

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

@@ -11,13 +11,19 @@
   cursor: pointer;
   border-radius: 200px 200px 200px 200px;
   color: var(--primary-text-color);
+
+  opacity: 0;
+
+  -moz-transition: background 0.2s ease-in, opacity 0.2s ease-in;
+  -o-transition: background 0.2s ease-in, opacity 0.2s ease-in;
+  transition: background 0.2s ease-in, opacity 0.2s ease-in;
 }
 
 .clearInputTextButton:hover {
   background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
+}
+.clearInputTextButton.visible {
+  opacity: 1;
 }
 
 .forceTextColor .clearInputTextButton:hover {
@@ -82,7 +88,7 @@
 
 .inputAction {
   position: absolute;
-  padding: 10px;
+  padding: 10px 8px;
   top: 5px;
   right: 0px;
   cursor: pointer;

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

@@ -60,7 +60,10 @@ export default Vue.extend({
         showOptions: false,
         selectedOption: -1,
         isPointerInList: false
-      }
+      },
+      // This button should be invisible on app start
+      // As the text input box should be empty
+      clearTextButtonVisible: false
     }
   },
   computed: {
@@ -74,11 +77,28 @@ export default Vue.extend({
 
     idDataList: function () {
       return `${this.id}_datalist`
+    },
+
+    inputDataPresent: function () {
+      return this.inputData.length > 0
     }
   },
   watch: {
     value: function (val) {
       this.inputData = val
+    },
+    inputDataPresent: function (newVal, oldVal) {
+      if (newVal) {
+        // The button needs to be visible **immediately**
+        // To allow user to see the transition
+        this.clearTextButtonVisible = true
+      } else {
+        // Hide the button after the transition
+        // 0.2s in CSS = 200ms in JS
+        setTimeout(() => {
+          this.clearTextButtonVisible = false
+        }, 200)
+      }
     }
   },
   mounted: function () {
@@ -104,6 +124,10 @@ export default Vue.extend({
     handleClearTextClick: function () {
       this.inputData = ''
       this.$emit('input', this.inputData)
+
+      // Focus on input element after text is clear for better UX
+      const inputElement = document.getElementById(this.id)
+      inputElement.focus()
     },
 
     addListener: function () {

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

@@ -21,12 +21,15 @@
       />
     </label>
     <font-awesome-icon
-      v-if="showClearTextButton"
+      v-if="showClearTextButton && clearTextButtonVisible"
       icon="times-circle"
       class="clearInputTextButton"
+      :class="{
+        visible: inputDataPresent
+      }"
       tabindex="0"
       role="button"
-      title="$t('Search Bar.Clear Input')"
+      :title="$t('Search Bar.Clear Input')"
       @click="handleClearTextClick"
       @keydown.space.prevent="handleClearTextClick"
       @keydown.enter.prevent="handleClearTextClick"