@algolia/autocomplete-core 1.5.0 → 1.5.1

package/dist/esm/createStore.js

@@ -22,6 +22,7 @@ export function createStore(reducer, props, onStoreStateChange) {
         state: state,
         prevState: prevState
       });
-    }
+    },
+    shouldSkipPendingUpdate: false
   };
 }

package/dist/esm/getPropGetters.js

@@ -38,7 +38,15 @@ export function getPropGetters(_ref) {
       // @TODO: support cases where there are multiple Autocomplete instances.
       // Right now, a second instance makes this computation return false.
       onTouchStart: function onTouchStart(event) {
-        if (store.getState().isOpen === false || event.target === inputElement) {
+        // The `onTouchStart` event shouldn't trigger the `blur` handler when
+        // it's not an interaction with Autocomplete. We detect it with the
+        // following heuristics:
+        // - the panel is closed AND there are no running requests
+        //   (no interaction with the autocomplete, no future state updates)
+        // - OR the touched target is the input element (should open the panel)
+        var isNotAutocompleteInteraction = store.getState().isOpen === false && !onInput.isRunning();
+
+        if (isNotAutocompleteInteraction || event.target === inputElement) {
           return;
         }
 
@@ -47,7 +55,14 @@ export function getPropGetters(_ref) {
         });
 
         if (isTargetWithinAutocomplete === false) {
-          store.dispatch('blur', null);
+          store.dispatch('blur', null); // If requests are still running when the user closes the panel, they
+          // could reopen the panel once they resolve.
+          // We want to prevent any subsequent query from reopening the panel
+          // because it would result in an unsolicited UI behavior.
+
+          if (!props.debug && onInput.isRunning()) {
+            store.shouldSkipPendingUpdate = true;
+          }
         }
       },
       // When scrolling on touch devices (mobiles, tablets, etc.), we want to
@@ -173,7 +188,14 @@ export function getPropGetters(_ref) {
         // We do rely on the `blur` event on touch devices.
         // See explanation in `onTouchStart`.
         if (!isTouchDevice) {
-          store.dispatch('blur', null);
+          store.dispatch('blur', null); // If requests are still running when the user closes the panel, they
+          // could reopen the panel once they resolve.
+          // We want to prevent any subsequent query from reopening the panel
+          // because it would result in an unsolicited UI behavior.
+
+          if (!props.debug && onInput.isRunning()) {
+            store.shouldSkipPendingUpdate = true;
+          }
         }
       },
       onClick: function onClick(event) {

package/dist/esm/onInput.d.ts

@@ -14,4 +14,7 @@ interface OnInputParams<TItem extends BaseItem> extends AutocompleteScopeApi<TIt
     store: AutocompleteStore<TItem>;
 }
 export declare function onInput<TItem extends BaseItem>({ event, nextState, props, query, refresh, store, ...setters }: OnInputParams<TItem>): Promise<void>;
+export declare namespace onInput {
+    var isRunning: () => boolean;
+}
 export {};

package/dist/esm/onInput.js

@@ -94,7 +94,20 @@ export function onInput(_ref) {
   })).then(function (collections) {
     var _nextState$isOpen2;
 
+    // Parameters passed to `onInput` could be stale when the following code
+    // executes, because `onInput` calls may not resolve in order.
+    // If it becomes a problem we'll need to save the last passed parameters.
+    // See: https://codesandbox.io/s/agitated-cookies-y290z
     setStatus('idle');
+
+    if (store.shouldSkipPendingUpdate) {
+      if (!runConcurrentSafePromise.isRunning()) {
+        store.shouldSkipPendingUpdate = false;
+      }
+
+      return;
+    }
+
     setCollections(collections);
     var isPanelOpen = props.shouldPanelOpen({
       state: store.getState()
@@ -122,4 +135,5 @@ export function onInput(_ref) {
       props.environment.clearTimeout(lastStalledId);
     }
   });
-}
+}
+onInput.isRunning = runConcurrentSafePromise.isRunning;

package/dist/esm/onKeyDown.js

@@ -86,7 +86,14 @@ export function onKeyDown(_ref) {
     // from removing the query right away because we first want to close the
     // panel.
     event.preventDefault();
-    store.dispatch(event.key, null);
+    store.dispatch(event.key, null); // Hitting the `Escape` key signals the end of a user interaction with the
+    // autocomplete. At this point, we should ignore any requests that are still
+    // running and could reopen the panel once they resolve, because that would
+    // result in an unsolicited UI behavior.
+
+    if (onInput.isRunning()) {
+      store.shouldSkipPendingUpdate = true;
+    }
   } else if (event.key === 'Enter') {
     // No active item, so we let the browser handle the native `onSubmit` form
     // event.

package/dist/esm/types/AutocompleteStore.d.ts

@@ -4,6 +4,7 @@ import { AutocompleteState } from './AutocompleteState';
 export interface AutocompleteStore<TItem extends BaseItem> {
     getState(): AutocompleteState<TItem>;
     dispatch(action: ActionType, payload: any): void;
+    shouldSkipPendingUpdate: boolean;
 }
 export declare type Reducer = <TItem extends BaseItem>(state: AutocompleteState<TItem>, action: Action<TItem, any>) => AutocompleteState<TItem>;
 declare type Action<TItem extends BaseItem, TPayload> = {

package/dist/esm/utils/createConcurrentSafePromise.d.ts

@@ -5,4 +5,7 @@ import { MaybePromise } from '@algolia/autocomplete-shared';
  * This is useful to prevent older promises to resolve after a newer promise,
  * otherwise resulting in stale resolved values.
  */
-export declare function createConcurrentSafePromise(): <TValue>(promise: MaybePromise<TValue>) => Promise<TValue>;
+export declare function createConcurrentSafePromise(): {
+    <TValue>(promise: MaybePromise<TValue>): Promise<TValue>;
+    isRunning(): boolean;
+};

package/dist/esm/utils/createConcurrentSafePromise.js

@@ -8,8 +8,11 @@ export function createConcurrentSafePromise() {
   var basePromiseId = -1;
   var latestResolvedId = -1;
   var latestResolvedValue = undefined;
-  return function runConcurrentSafePromise(promise) {
+  var runningPromisesCount = 0;
+
+  function runConcurrentSafePromise(promise) {
     basePromiseId++;
+    runningPromisesCount++;
     var currentPromiseId = basePromiseId;
     return Promise.resolve(promise).then(function (x) {
       // The promise might take too long to resolve and get outdated. This would
@@ -32,6 +35,14 @@ export function createConcurrentSafePromise() {
       latestResolvedId = currentPromiseId;
       latestResolvedValue = x;
       return x;
+    }).finally(function () {
+      return runningPromisesCount--;
     });
+  }
+
+  runConcurrentSafePromise.isRunning = function () {
+    return runningPromisesCount > 0;
   };
+
+  return runConcurrentSafePromise;
 }

package/dist/umd/index.development.js

@@ -1,9 +1,9 @@
-/*! @algolia/autocomplete-core 1.5.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-core 1.5.1 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@algolia/autocomplete-core'] = {}));
-}(this, (function (exports) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@algolia/autocomplete-core"] = {}));
+})(this, (function (exports) { 'use strict';
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -43,20 +43,20 @@
     return target;
   }
 
-  function _typeof(obj) {
+  function _typeof$1(obj) {
     "@babel/helpers - typeof";
 
     if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
+      _typeof$1 = function (obj) {
         return typeof obj;
       };
     } else {
-      _typeof = function (obj) {
+      _typeof$1 = function (obj) {
         return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
       };
     }
 
-    return _typeof(obj);
+    return _typeof$1(obj);
   }
 
   function _defineProperty(obj, key, value) {
@@ -111,27 +111,27 @@
   }
 
   function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
   }
 
   function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+    if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
   }
 
   function _iterableToArray(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
-  function _unsupportedIterableToArray(o, minLen) {
+  function _unsupportedIterableToArray$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
   }
 
-  function _arrayLikeToArray(arr, len) {
+  function _arrayLikeToArray$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
 
     for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -144,23 +144,23 @@
   }
 
   function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
-  function _unsupportedIterableToArray$1(o, minLen) {
+  function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
   }
 
-  function _arrayLikeToArray$1(arr, len) {
+  function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
 
     for (var i = 0, arr2 = new Array(len); i < len; i++) {
@@ -204,20 +204,20 @@
     if (Array.isArray(arr)) return arr;
   }
 
-  function _typeof$1(obj) {
+  function _typeof(obj) {
     "@babel/helpers - typeof";
 
     if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof$1 = function _typeof(obj) {
+      _typeof = function _typeof(obj) {
         return typeof obj;
       };
     } else {
-      _typeof$1 = function _typeof(obj) {
+      _typeof = function _typeof(obj) {
         return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
       };
     }
 
-    return _typeof$1(obj);
+    return _typeof(obj);
   }
   /**
    * Decycles objects with circular references.
@@ -228,7 +228,7 @@
   function decycle(obj) {
     var seen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Set();
 
-    if ( !obj || _typeof$1(obj) !== 'object') {
+    if (!obj || _typeof(obj) !== 'object') {
       return obj;
     }
 
@@ -288,7 +288,7 @@
 
   var noop = function noop() {};
 
-  var version = '1.5.0';
+  var version = '1.5.1';
 
   var userAgents = [{
     segment: 'autocomplete-core',
@@ -341,7 +341,8 @@
           state: state,
           prevState: prevState
         });
-      }
+      },
+      shouldSkipPendingUpdate: false
     };
   }
 
@@ -404,8 +405,11 @@
     var basePromiseId = -1;
     var latestResolvedId = -1;
     var latestResolvedValue = undefined;
-    return function runConcurrentSafePromise(promise) {
+    var runningPromisesCount = 0;
+
+    function runConcurrentSafePromise(promise) {
       basePromiseId++;
+      runningPromisesCount++;
       var currentPromiseId = basePromiseId;
       return Promise.resolve(promise).then(function (x) {
         // The promise might take too long to resolve and get outdated. This would
@@ -428,8 +432,16 @@
         latestResolvedId = currentPromiseId;
         latestResolvedValue = x;
         return x;
+      }).finally(function () {
+        return runningPromisesCount--;
       });
+    }
+
+    runConcurrentSafePromise.isRunning = function () {
+      return runningPromisesCount > 0;
     };
+
+    return runConcurrentSafePromise;
   }
 
   /**
@@ -470,7 +482,7 @@
     var seenSourceIds = [];
     return Promise.resolve(getSources(params)).then(function (sources) {
       invariant(Array.isArray(sources), function () {
-        return "The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(_typeof(sources)), ":\n\n").concat(JSON.stringify(decycle(sources), null, 2));
+        return "The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(_typeof$1(sources)), ":\n\n").concat(JSON.stringify(decycle(sources), null, 2));
       });
       return Promise.all(sources // We allow `undefined` and `false` sources to allow users to use
       // `Boolean(query) && source` (=> `false`).
@@ -864,7 +876,7 @@
       var transform = matches[0].transformResponse;
       var items = transform ? transform(mapToAlgoliaResponse(results)) : results;
       invariant(Array.isArray(items), function () {
-        return "The `getItems` function from source \"".concat(source.sourceId, "\" must return an array of items but returned type ").concat(JSON.stringify(_typeof(items)), ":\n\n").concat(JSON.stringify(decycle(items), null, 2), ".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems");
+        return "The `getItems` function from source \"".concat(source.sourceId, "\" must return an array of items but returned type ").concat(JSON.stringify(_typeof$1(items)), ":\n\n").concat(JSON.stringify(decycle(items), null, 2), ".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems");
       });
       invariant(items.every(Boolean), "The `getItems` function from source \"".concat(source.sourceId, "\" must return an array of items but returned ").concat(JSON.stringify(undefined), ".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"));
       return {
@@ -874,7 +886,7 @@
     });
   }
 
-  var _excluded = ["event", "nextState", "props", "query", "refresh", "store"];
+  var _excluded$2 = ["event", "nextState", "props", "query", "refresh", "store"];
   var lastStalledId = null;
   var runConcurrentSafePromise = createConcurrentSafePromise();
   function onInput(_ref) {
@@ -885,7 +897,7 @@
         query = _ref.query,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, _excluded);
+        setters = _objectWithoutProperties(_ref, _excluded$2);
 
     if (lastStalledId) {
       props.environment.clearTimeout(lastStalledId);
@@ -956,7 +968,20 @@
     })).then(function (collections) {
       var _nextState$isOpen2;
 
+      // Parameters passed to `onInput` could be stale when the following code
+      // executes, because `onInput` calls may not resolve in order.
+      // If it becomes a problem we'll need to save the last passed parameters.
+      // See: https://codesandbox.io/s/agitated-cookies-y290z
       setStatus('idle');
+
+      if (store.shouldSkipPendingUpdate) {
+        if (!runConcurrentSafePromise.isRunning()) {
+          store.shouldSkipPendingUpdate = false;
+        }
+
+        return;
+      }
+
       setCollections(collections);
       var isPanelOpen = props.shouldPanelOpen({
         state: store.getState()
@@ -985,6 +1010,7 @@
       }
     });
   }
+  onInput.isRunning = runConcurrentSafePromise.isRunning;
 
   var _excluded$1 = ["event", "props", "refresh", "store"];
   function onKeyDown(_ref) {
@@ -1061,7 +1087,14 @@
       // from removing the query right away because we first want to close the
       // panel.
       event.preventDefault();
-      store.dispatch(event.key, null);
+      store.dispatch(event.key, null); // Hitting the `Escape` key signals the end of a user interaction with the
+      // autocomplete. At this point, we should ignore any requests that are still
+      // running and could reopen the panel once they resolve, because that would
+      // result in an unsolicited UI behavior.
+
+      if (onInput.isRunning()) {
+        store.shouldSkipPendingUpdate = true;
+      }
     } else if (event.key === 'Enter') {
       // No active item, so we let the browser handle the native `onSubmit` form
       // event.
@@ -1158,7 +1191,7 @@
     }
   }
 
-  var _excluded$2 = ["props", "refresh", "store"],
+  var _excluded = ["props", "refresh", "store"],
       _excluded2 = ["inputElement", "formElement", "panelElement"],
       _excluded3 = ["inputElement"],
       _excluded4 = ["inputElement", "maxLength"],
@@ -1167,7 +1200,7 @@
     var props = _ref.props,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, _excluded$2);
+        setters = _objectWithoutProperties(_ref, _excluded);
 
     var getEnvironmentProps = function getEnvironmentProps(providedProps) {
       var inputElement = providedProps.inputElement,
@@ -1184,7 +1217,15 @@
         // @TODO: support cases where there are multiple Autocomplete instances.
         // Right now, a second instance makes this computation return false.
         onTouchStart: function onTouchStart(event) {
-          if (store.getState().isOpen === false || event.target === inputElement) {
+          // The `onTouchStart` event shouldn't trigger the `blur` handler when
+          // it's not an interaction with Autocomplete. We detect it with the
+          // following heuristics:
+          // - the panel is closed AND there are no running requests
+          //   (no interaction with the autocomplete, no future state updates)
+          // - OR the touched target is the input element (should open the panel)
+          var isNotAutocompleteInteraction = store.getState().isOpen === false && !onInput.isRunning();
+
+          if (isNotAutocompleteInteraction || event.target === inputElement) {
             return;
           }
 
@@ -1193,7 +1234,14 @@
           });
 
           if (isTargetWithinAutocomplete === false) {
-            store.dispatch('blur', null);
+            store.dispatch('blur', null); // If requests are still running when the user closes the panel, they
+            // could reopen the panel once they resolve.
+            // We want to prevent any subsequent query from reopening the panel
+            // because it would result in an unsolicited UI behavior.
+
+            if (!props.debug && onInput.isRunning()) {
+              store.shouldSkipPendingUpdate = true;
+            }
           }
         },
         // When scrolling on touch devices (mobiles, tablets, etc.), we want to
@@ -1221,8 +1269,8 @@
     };
 
     var getFormProps = function getFormProps(providedProps) {
-      var inputElement = providedProps.inputElement,
-          rest = _objectWithoutProperties(providedProps, _excluded3);
+      providedProps.inputElement;
+          var rest = _objectWithoutProperties(providedProps, _excluded3);
 
       return _objectSpread2({
         action: '',
@@ -1274,9 +1322,9 @@
 
       var isTouchDevice = ('ontouchstart' in props.environment);
 
-      var _ref2 = providedProps || {},
-          inputElement = _ref2.inputElement,
-          _ref2$maxLength = _ref2.maxLength,
+      var _ref2 = providedProps || {};
+          _ref2.inputElement;
+          var _ref2$maxLength = _ref2.maxLength,
           maxLength = _ref2$maxLength === void 0 ? 512 : _ref2$maxLength,
           rest = _objectWithoutProperties(_ref2, _excluded4);
 
@@ -1319,7 +1367,14 @@
           // We do rely on the `blur` event on touch devices.
           // See explanation in `onTouchStart`.
           if (!isTouchDevice) {
-            store.dispatch('blur', null);
+            store.dispatch('blur', null); // If requests are still running when the user closes the panel, they
+            // could reopen the panel once they resolve.
+            // We want to prevent any subsequent query from reopening the panel
+            // because it would result in an unsolicited UI behavior.
+
+            if (!props.debug && onInput.isRunning()) {
+              store.shouldSkipPendingUpdate = true;
+            }
           }
         },
         onClick: function onClick(event) {
@@ -1730,5 +1785,5 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=index.development.js.map