Merge pull request #131 from AddSearch/sc-11132/refactor-autocomplete…

…-and-keyword-states

feat: [sc-11132] Fix search ui states for autocomplete & keyword

package.json

@@ -1,6 +1,6 @@
 {
   "name": "addsearch-search-ui",
-  "version": "0.8.15",
+  "version": "0.9.0",
   "description": "JavaScript library to develop Search UIs for the web",
   "repository": {
     "type": "git",

src/actions/autocomplete.js

@@ -24,9 +24,20 @@ export function autocompleteSuggestions(client, keyword) {
       type: AUTOCOMPLETE_SUGGESTIONS_CLEAR
     };
   }
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const keywordMinLengthToFetch = getState().keyword.minLengthRequiredToFetch;
+    if (keyword.length < keywordMinLengthToFetch) {
+      return;
+    }
+
     dispatch(autocompleteFetchStart(SUGGESTIONS_JSON_KEY));
-    client.suggestions(keyword, (res) => dispatch(autocompleteSuggestionsResults(keyword, res)));
+    client.suggestions(keyword, (res) => {
+      const currentKeyword = getState().keyword.value;
+      if (currentKeyword === '') {
+        return;
+      }
+      dispatch(autocompleteSuggestionsResults(keyword, res));
+    });
   };
 }
 
@@ -36,9 +47,20 @@ export function autocompleteCustomFields(client, keyword, field) {
       type: AUTOCOMPLETE_CUSTOM_FIELDS_CLEAR
     };
   }
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const keywordMinLengthToFetch = getState().keyword.minLengthRequiredToFetch;
+    if (keyword.length < keywordMinLengthToFetch) {
+      return;
+    }
+
     dispatch(autocompleteFetchStart(CUSTOM_FIELDS_JSON_KEY));
-    client.autocomplete(field, keyword, (res) => dispatch(autocompleteCustomFieldsResults(res)));
+    client.autocomplete(field, keyword, (res) => {
+      const currentKeyword = getState().keyword.value;
+      if (currentKeyword === '') {
+        return;
+      }
+      dispatch(autocompleteCustomFieldsResults(res));
+    });
   };
 }
 
@@ -63,11 +85,20 @@ export function fetchAutocompleteSearchResultsStory(client, jsonKey, keyword, ap
       type: AUTOCOMPLETE_SEARCH_CLEAR
     };
   }
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const keywordMinLengthToFetch = getState().keyword.minLengthRequiredToFetch;
+    if (keyword.length < keywordMinLengthToFetch) {
+      return;
+    }
+
     dispatch(autocompleteFetchStart(jsonKey));
-    client.search(keyword, (res) =>
-      dispatch(autocompleteSearchResults(keyword, res, jsonKey, appendResults))
-    );
+    client.search(keyword, (res) => {
+      const currentKeyword = getState().keyword.value;
+      if (currentKeyword === '') {
+        return;
+      }
+      dispatch(autocompleteSearchResults(keyword, res, jsonKey, appendResults));
+    });
   };
 }
 

src/actions/keyword.js

@@ -1,4 +1,5 @@
 export const KEYWORD = 'KEYWORD';
+export const KEYWORD_MIN_LENGTH_REQUIRED_TO_FETCH = 'KEYWORD_MIN_LENGTH_REQUIRED_TO_FETCH';
 
 export function setKeyword(value, skipAutocomplete, searchFieldContainerId, setSearchFieldValue) {
   return {
@@ -9,3 +10,10 @@ export function setKeyword(value, skipAutocomplete, searchFieldContainerId, setS
     setSearchFieldValue: setSearchFieldValue || false
   };
 }
+
+export function setKeywordMinLengthRequiredToFetch(opt) {
+  return {
+    type: KEYWORD_MIN_LENGTH_REQUIRED_TO_FETCH,
+    minLengthRequiredToFetch: opt.minLengthRequiredToFetch
+  };
+}

src/actions/search.js

@@ -10,12 +10,6 @@ export const SEARCH_FETCH_START = 'SEARCH_FETCH_START';
 export const SEARCH_RESULTS = 'SEARCH_RESULTS';
 export const CLEAR_SEARCH_RESULTS = 'CLEAR_SEARCH_RESULTS';
 
-export function start() {
-  return {
-    type: START
-  };
-}
-
 function _matchKeywordToCustomFieldValue(keyword, hits, field) {
   return hits.find((hit) => {
     if (!hit.custom_fields || !hit.custom_fields[field]) {
@@ -53,7 +47,11 @@ export function fetchSearchResultsStory(
       type: CLEAR_SEARCH_RESULTS
     };
   }
-  return (dispatch) => {
+  return (dispatch, getState) => {
+    const keywordMinLengthToFetch = getState().keyword.minLengthRequiredToFetch;
+    if (isHistoryDebounced && keyword.length < keywordMinLengthToFetch) {
+      return;
+    }
     dispatch({
       type: SEARCH_FETCH_START
     });

src/components/autocomplete/autocomplete.js

@@ -27,6 +27,7 @@ export default class Autocomplete {
     this.hasConversationalSearch = hasConversationalSearch;
     this.conf = conf;
     this.lastOnmouseOver = null;
+    this.minLengthRequired = this.reduxStore.getState().keyword.minLengthRequiredToFetch;
 
     if (this.conf.hideAutomatically === false) {
       this.reduxStore.dispatch(setHideAutomatically(false));
@@ -60,8 +61,15 @@ export default class Autocomplete {
   }
 
   autocompleteResultsChanged(state) {
-    // Wait until pending API requests have finished (if multiple autocomplete clients)
-    if (state.pendingRequests.length !== 0) {
+    if (state.dropRendering) {
+      this.clearRenderedHtml();
+      return;
+    }
+    const currentKeyword = this.reduxStore.getState().keyword.value;
+    const shouldSkipRendering =
+      state.pendingRequests.length > 0 || currentKeyword.length < this.minLengthRequired;
+
+    if (shouldSkipRendering) {
       return;
     }
 
@@ -92,11 +100,10 @@ export default class Autocomplete {
 
   keywordChanged(kw) {
     // Fetch suggestions if keyword was typed, not externally set (e.g. by browser's back button)
-    const keyword = kw.skipAutocomplete === false ? kw.value : null;
-
-    if (keyword === '') {
-      this.reduxStore.dispatch(autocompleteHideAndDropRendering());
+    if (kw.skipAutocomplete) {
+      return;
     }
+    const keyword = kw.value;
 
     this.conf.sources.forEach((source) => {
       const client = source.client || this.client;
@@ -137,23 +144,15 @@ export default class Autocomplete {
     });
   }
 
+  clearRenderedHtml = () => {
+    document.getElementById(this.conf.containerId).innerHTML = '';
+    this.renderedHtml = '';
+  };
+
   render(autocompleteState) {
     // Hide autocomplete after a search is triggered
-    if (autocompleteState.dropRendering && this.renderedHtml) {
-      document.getElementById(this.conf.containerId).innerHTML = '';
-      this.renderedHtml = '';
-      return;
-    }
-
-    // Don't re-render while API requests are pending
-    if (autocompleteState.pendingRequests.length !== 0 || autocompleteState.dropRendering) {
-      return;
-    }
-
-    // Hide autocomplete
     if (autocompleteState.visible === false) {
-      document.getElementById(this.conf.containerId).innerHTML = '';
-      this.renderedHtml = '';
+      this.clearRenderedHtml();
       return;
     }
 
@@ -238,6 +237,7 @@ export default class Autocomplete {
   suggestionMouseDown(e) {
     const keyword = e.target.getAttribute('data-keyword');
     const store = this.reduxStore;
+    store.dispatch(autocompleteHideAndDropRendering());
     store.dispatch(setKeyword(keyword, true, null, true));
 
     // Redirect to search results page

src/components/conversationalsearchresult/conversationalsearchresult.scss

@@ -34,7 +34,7 @@
 
   .header {
     display: flex;
-    align-items: start;
+    align-items: flex-start;
     justify-content: space-between;
   }
 
@@ -144,7 +144,7 @@
     margin-top: 12px;
     display: flex;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
     gap: 24px;
 
     .copy-confirm-message {

src/components/searchfield/searchfield.js

@@ -4,7 +4,6 @@ import handlebars from 'handlebars';
 import PRECOMPILED_SEARCHFIELD_TEMPLATE from './precompile-templates/searchfield.handlebars';
 
 import {
-  autocompleteHide,
   autocompleteShow,
   keyboardEvent,
   setActiveSuggestion,
@@ -13,7 +12,7 @@ import {
   autocompleteHideAndDropRendering
 } from '../../actions/autocomplete';
 import { setPage } from '../../actions/pagination';
-import { setKeyword } from '../../actions/keyword';
+import { setKeyword, setKeywordMinLengthRequiredToFetch } from '../../actions/keyword';
 import { observeStoreByKey } from '../../store';
 import { MATCH_ALL_QUERY, WARMUP_QUERY_PREFIX } from '../../index';
 import { redirectToSearchResultsPage } from '../../util/history';
@@ -36,9 +35,15 @@ export default class SearchField {
     this.matchAllQuery = matchAllQueryWhenSearchFieldEmpty;
     this.minLengthToShowResults = conf.minLengthToShowResults || 1;
     this.firstRenderDone = false;
-    this.firstSelectorBindDone = false;
     this.onSearch = onSearch;
 
+    const minLengthToShowResults = conf.minLengthToShowResults || 0;
+    this.reduxStore.dispatch(
+      setKeywordMinLengthRequiredToFetch({
+        minLengthRequiredToFetch: minLengthToShowResults
+      })
+    );
+
     if (conf.selectorToBind) {
       this.bindContainer();
       observeStoreByKey(this.reduxStore, 'keyword', (kw) => {
@@ -167,8 +172,8 @@ export default class SearchField {
     if (keyword === '' && this.matchAllQuery) {
       keyword = MATCH_ALL_QUERY;
     }
+    store.dispatch(autocompleteHideAndDropRendering());
     store.dispatch(setKeyword(keyword, true, null, false));
-    store.dispatch(autocompleteHide());
     this.redirectOrSearch(keyword);
   }
 
@@ -270,11 +275,8 @@ export default class SearchField {
     }
 
     const skipAutocomplete = this.conf.ignoreAutocomplete === true;
-    if (keyword.length < this.minLengthToShowResults) {
-      return;
-    }
     store.dispatch(setKeyword(keyword, skipAutocomplete, this.conf.containerId));
-
+    store.dispatch(autocompleteShow());
     if (this.conf.searchAsYouType === true) {
       this.executeSearch(this.client, keyword, true);
     }
@@ -316,7 +318,7 @@ export default class SearchField {
 
   onblur() {
     if (this.reduxStore.getState().autocomplete.hideAutomatically) {
-      this.reduxStore.dispatch(autocompleteHide());
+      this.reduxStore.dispatch(autocompleteHideAndDropRendering());
     }
   }
 }

src/reducers/autocomplete.js

@@ -43,20 +43,21 @@ export default function searchsuggestions(state = initialState, action) {
       }
 
       return Object.assign({}, state, {
-        pendingRequests: addPendingReq,
-        dropRendering: false
+        pendingRequests: addPendingReq
       });
 
     case AUTOCOMPLETE_SUGGESTIONS_CLEAR:
       return Object.assign({}, state, {
         suggestions: [],
-        activeSuggestionIndex: null
+        activeSuggestionIndex: null,
+        pendingRequests: []
       });
 
     case AUTOCOMPLETE_CUSTOM_FIELDS_CLEAR:
       return Object.assign({}, state, {
         customFields: [],
-        activeSuggestionIndex: null
+        activeSuggestionIndex: null,
+        pendingRequests: []
       });
 
     case AUTOCOMPLETE_SUGGESTIONS_RESULTS:
@@ -152,7 +153,8 @@ export default function searchsuggestions(state = initialState, action) {
 
     case AUTOCOMPLETE_SHOW:
       return Object.assign({}, state, {
-        visible: true
+        visible: true,
+        dropRendering: false
       });
 
     case HIDE_AUTOMATICALLY:

src/reducers/keyword.js

@@ -1,10 +1,11 @@
-import { KEYWORD } from '../actions/keyword';
+import { KEYWORD, KEYWORD_MIN_LENGTH_REQUIRED_TO_FETCH } from '../actions/keyword';
 
 const initialState = {
   value: '',
   skipAutocomplete: false,
   searchFieldContainerId: null,
-  setSearchFieldValue: null
+  setSearchFieldValue: null,
+  minLengthRequiredToFetch: 0
 };
 
 export default function keyword(state = initialState, action) {
@@ -17,6 +18,11 @@ export default function keyword(state = initialState, action) {
         setSearchFieldValue: action.setSearchFieldValue
       });
 
+    case KEYWORD_MIN_LENGTH_REQUIRED_TO_FETCH:
+      return Object.assign({}, state, {
+        minLengthRequiredToFetch: action.minLengthRequiredToFetch
+      });
+
     default:
       return state;
   }

yarn.lock

@@ -1500,9 +1500,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001580:
-  version "1.0.30001581"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz"
-  integrity sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==
+  version "1.0.30001680"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz"
+  integrity sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==
 
 chalk@^2.4.2:
   version "2.4.2"
@@ -3075,6 +3075,11 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"