Refactor: little enhance for search function

pinry-spa/src/components/Boards.vue

@@ -205,7 +205,6 @@ export default {
       if (!this.shouldFetchMore(created)) {
         return;
       }
-      this.status.loading = true;
       let promise;
       if (this.filters.boardUsername) {
         promise = API.fetchBoardForUser(
@@ -217,7 +216,10 @@ export default {
           this.filters.boardNameContains,
           this.status.offset,
         );
+      } else {
+        return;
       }
+      this.status.loading = true;
       promise.then(
         (resp) => {
           const { results, next } = resp.data;

pinry-spa/src/components/search/SearchPanel.vue

@@ -12,21 +12,26 @@
             class="search-input"
             v-model="name"
             :data="filteredDataArray"
-            :keep-first="false"
+            :keep-first="true"
             :open-on-focus="true"
             placeholder="select a filter then type to filter"
             icon="magnify"
             @select="option => selected = option">
             <template slot="empty">No results found</template>
           </b-autocomplete>
-          <b-input
-            v-show="filterType === 'Board'"
-            class="search-input"
-            v-model="boardText"
-            placeholder="type to search board"
-            icon="magnify"
-          >
-          </b-input>
+          <template v-if="filterType === 'Board'">
+            <b-input
+              class="search-input"
+              type="search"
+              v-model="boardText"
+              placeholder="type to search board"
+              icon="magnify"
+            >
+            </b-input>
+            <p class="control">
+              <b-button @click="searchBoard" class="button is-primary">Search</b-button>
+            </p>
+          </template>
         </b-field>
       </div>
     </div>
@@ -52,21 +57,23 @@ export default {
   },
   methods: {
     selectOption(filterName) {
+      this.name = '';
+      this.boardText = '';
       if (filterName === 'Tag') {
         this.selectedOption = this.options.Tag;
       }
     },
-  },
-  watch: {
-    boardText(newVal) {
-      if (newVal === '') {
+    searchBoard() {
+      if (this.boardText === '') {
         return;
       }
       this.$emit(
         'selected',
-        { filterType: this.filterType, selected: newVal },
+        { filterType: this.filterType, selected: this.boardText },
       );
     },
+  },
+  watch: {
     filterType(newVal) {
       this.selectOption(newVal);
     },