cveRecordSearchModule: improve handling of empty search string

Author: rlxdev

src/components/cveRecordSearchModule.vue

@@ -19,7 +19,7 @@
     <div class="field has-addons mt-1">
       <p class="control">
         <span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
-          <select v-model="searchType" @input="searchTypeSwap">
+          <select v-model="searchType">
             <option>Search CVE List</option>
             <option>Find a Test CVE Record/ID (Legacy)</option>
           </select>
@@ -111,6 +111,7 @@ function resetStates() {
   queryString.value = cveListSearchStore.query = '';
   showHelpMessage('');
   cveListSearchStore.isSearchButtonDisabled = true;
+  resetSearch();
 }
 
 function showHelpMessage(helpText) {
@@ -226,16 +227,19 @@ function onInputChange() {
     const isSearch = searchTypeBoolean.value;
     const searchValue = isSearch ? queryString.value : cveId;
 
-  if (cveListSearchStore.isSearchButtonDisabled) {
-    if (prevSearchValue.value !== searchValue)
-      cveListSearchStore.isSearchButtonDisabled = false;
-  } else if (!searchValue.length) {
-    // This handles the case when the user clears the input field following
-    // a successful search, possibly by using the delete button or selecting
-    // the input and cutting via the keyboard.  It makes the state consistent
-    // with when the page starts with nothing in the input field.
+  if (!searchValue.length) {
+    // This handles the case when the user clears the input field, by using the
+    // delete button or selecting the input and cutting via the keyboard.  It
+    // makes the state consistent with when the page starts with nothing in the
+    // input field.
 
+    resetSearch();
+    showHelpMessage('');
     cveListSearchStore.isSearchButtonDisabled = true;
+
+  } else if (cveListSearchStore.isSearchButtonDisabled
+             && prevSearchValue.value !== searchValue) {
+    cveListSearchStore.isSearchButtonDisabled = false;
   }
 }
 
@@ -256,29 +260,28 @@ function validate() {
     } finally {
       cveListSearchStore.isSearchButtonDisabled = false;
     }
-  } else if (route?.name != 'home' || route?.query) {
+  } else {
     // The query string is not valid and the route indicates that the URL
     // is most likely associated with a previous valid search.  The user
     // has initiated another search that is unrelated to the URL being
     // displayed (e.g., cve.org/CVERecord/SearchResults?query=CVE-2020-0001).
     // Rather than display a URL that is not associated with the
     // current search, reset it to the home route.
 
-    router.push({name: 'home', query: {}});
+    resetSearch();
   }
 }
 
-function searchTypeSwap() {
+function resetSearch() {
 
-  // This function is used only when there's an option menu present that
-  // allows for using the "legacy" find, which does NOT apply to the
-  // production website.  When a switch is made in the type of search, this
-  // function resets the previous search value and removes the URL that's
-  // applicable to the other search type.
+  // This function performs some reset tasks for the search that are
+  // common.  This includes clearing the previous search value and
+  // making sure the URL is cleared of any search parameters.
 
   prevSearchValue.value = '';
 
-  router.push({name: 'home', query: {}});
+  if (route?.name != 'home' || route?.query)
+    router.push({name: 'home', query: {}});
 }
 
 const websiteEnv = computed(() => {