[qa] refactor SearchField widget with v-model

src/components/widgets/SearchField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flexrow search-field-wrapper" ref="wrapper" @click="focus">
+  <div class="flexrow search-field-wrapper" :class="{ focused }" @click="focus">
     <div class="flexrow-item">
       <search-icon class="search-icon" />
     </div>
@@ -12,8 +12,9 @@
         :placeholder="placeholder"
         @input="onSearchChange"
         @keyup.enter="onEnterPressed"
-        @focus="setFocusedStyle"
-        @blur="unsetFocusedStyle"
+        @focus="focused = true"
+        @blur="focused = false"
+        v-model.trim="search"
         v-focus="focusOptions"
       />
     </div>
@@ -37,7 +38,10 @@ export default {
   name: 'search-field',
 
   data() {
-    return {}
+    return {
+      search: '',
+      focused: false
+    }
   },
 
   props: {
@@ -49,6 +53,7 @@ export default {
       type: Boolean,
       default: false
     },
+    // FIXME:property no longer used in component
     active: {
       type: Boolean,
       default: true
@@ -63,53 +68,36 @@ export default {
     SearchIcon
   },
 
-  computed: {},
-
   methods: {
     onSearchChange() {
-      this.$emit('change', this.$refs.input.value)
+      this.$emit('change', this.search)
     },
 
     onEnterPressed() {
-      this.$emit('enter', this.$refs.input.value)
+      this.$emit('enter', this.search)
     },
 
     onSaveClicked() {
-      const value = this.$refs.input.value.trim()
-      if (value.length > 0) {
-        if (this.canSave) this.$emit('save', value)
+      if (this.search && this.canSave) {
+        this.$emit('save', this.search)
       }
     },
 
     getValue() {
-      if (this.$refs.input) {
-        return this.$refs.input.value
-      } else {
-        return ''
-      }
+      return this.search
     },
 
     setValue(value) {
-      this.$refs.input.value = value
+      this.search = value
     },
 
     focus(options) {
-      if (this.$refs.input) {
-        this.$refs.input.focus(options)
-      }
+      this.$refs.input?.focus(options)
     },
 
     clearSearch() {
-      this.setValue('')
+      this.search = ''
       this.onSearchChange()
-    },
-
-    setFocusedStyle() {
-      this.$refs.wrapper.className = 'flexrow search-field-wrapper focused'
-    },
-
-    unsetFocusedStyle() {
-      this.$refs.wrapper.className = 'flexrow search-field-wrapper'
     }
   }
 }
@@ -151,6 +139,8 @@ export default {
 }
 
 .search-icon {
+  width: 20px;
+  margin-top: 5px;
   color: var(--text);
 }
 
@@ -197,11 +187,6 @@ export default {
   border-color: $green;
 }
 
-.search-icon {
-  width: 20px;
-  margin-top: 5px;
-}
-
 @media screen and (max-width: 768px) {
   .search-input {
     width: 200px;