@algolia/autocomplete-core 1.4.0 → 1.5.2

package/dist/umd/index.development.js

@@ -1,49 +1,22 @@
-/*! @algolia/autocomplete-core 1.4.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-core 1.5.2 | 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';
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
-  }
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
+  (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);
 
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+
       keys.push.apply(keys, symbols);
     }
 
@@ -70,6 +43,37 @@
     return target;
   }
 
+  function _typeof$1(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof$1 = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof$1 = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof$1(obj);
+  }
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -107,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" && Symbol.iterator in Object(iter)) return Array.from(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];
@@ -140,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++) {
@@ -167,14 +171,17 @@
   }
 
   function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+
+    var _s, _e;
 
     try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
         _arr.push(_s.value);
 
         if (i && _arr.length === i) break;
@@ -197,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.
@@ -221,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;
     }
 
@@ -281,6 +288,13 @@
 
   var noop = function noop() {};
 
+  var version = '1.5.2';
+
+  var userAgents = [{
+    segment: 'autocomplete-core',
+    version: version
+  }];
+
   var warnCache = {
     current: {}
   };
@@ -309,74 +323,117 @@
     "development" !== 'production' ? warn(!options.debug, 'The `debug` option is meant for development debugging and should not be used in production.') : void 0;
   }
 
-  function createStore(reducer, props, onStoreStateChange) {
-    var state = props.initialState;
+  function createInternalCancelablePromise(promise, initialState) {
+    var state = initialState;
     return {
-      getState: function getState() {
-        return state;
+      then: function then(onfulfilled, onrejected) {
+        return createInternalCancelablePromise(promise.then(createCallback(onfulfilled, state, promise), createCallback(onrejected, state, promise)), state);
       },
-      dispatch: function dispatch(action, payload) {
-        var prevState = _objectSpread2({}, state);
+      catch: function _catch(onrejected) {
+        return createInternalCancelablePromise(promise.catch(createCallback(onrejected, state, promise)), state);
+      },
+      finally: function _finally(onfinally) {
+        if (onfinally) {
+          state.onCancelList.push(onfinally);
+        }
 
-        state = reducer(state, {
-          type: action,
-          props: props,
-          payload: payload
-        });
-        onStoreStateChange({
-          state: state,
-          prevState: prevState
+        return createInternalCancelablePromise(promise.finally(createCallback(onfinally && function () {
+          state.onCancelList = [];
+          return onfinally();
+        }, state, promise)), state);
+      },
+      cancel: function cancel() {
+        state.isCanceled = true;
+        var callbacks = state.onCancelList;
+        state.onCancelList = [];
+        callbacks.forEach(function (callback) {
+          callback();
         });
+      },
+      isCanceled: function isCanceled() {
+        return state.isCanceled === true;
       }
     };
   }
 
-  function getAutocompleteSetters(_ref) {
-    var store = _ref.store;
-
-    var setActiveItemId = function setActiveItemId(value) {
-      store.dispatch('setActiveItemId', value);
-    };
+  function cancelable(promise) {
+    return createInternalCancelablePromise(promise, {
+      isCanceled: false,
+      onCancelList: []
+    });
+  }
 
-    var setQuery = function setQuery(value) {
-      store.dispatch('setQuery', value);
-    };
+  function createCallback(onResult, state, fallback) {
+    if (!onResult) {
+      return fallback;
+    }
 
-    var setCollections = function setCollections(rawValue) {
-      var baseItemId = 0;
-      var value = rawValue.map(function (collection) {
-        return _objectSpread2(_objectSpread2({}, collection), {}, {
-          // We flatten the stored items to support calling `getAlgoliaResults`
-          // from the source itself.
-          items: flatten(collection.items).map(function (item) {
-            return _objectSpread2(_objectSpread2({}, item), {}, {
-              __autocomplete_id: baseItemId++
-            });
-          })
-        });
-      });
-      store.dispatch('setCollections', value);
-    };
+    return function callback(arg) {
+      if (state.isCanceled) {
+        return arg;
+      }
 
-    var setIsOpen = function setIsOpen(value) {
-      store.dispatch('setIsOpen', value);
+      return onResult(arg);
     };
+  }
 
-    var setStatus = function setStatus(value) {
-      store.dispatch('setStatus', value);
+  function createCancelablePromiseList() {
+    var list = [];
+    return {
+      add: function add(cancelablePromise) {
+        list.push(cancelablePromise);
+        return cancelablePromise.finally(function () {
+          list = list.filter(function (item) {
+            return item !== cancelablePromise;
+          });
+        });
+      },
+      cancelAll: function cancelAll() {
+        list.forEach(function (promise) {
+          return promise.cancel();
+        });
+      },
+      isEmpty: function isEmpty() {
+        return list.length === 0;
+      }
     };
+  }
 
-    var setContext = function setContext(value) {
-      store.dispatch('setContext', value);
-    };
+  /**
+   * Creates a runner that executes promises in a concurrent-safe way.
+   *
+   * This is useful to prevent older promises to resolve after a newer promise,
+   * otherwise resulting in stale resolved values.
+   */
+  function createConcurrentSafePromise() {
+    var basePromiseId = -1;
+    var latestResolvedId = -1;
+    var latestResolvedValue = undefined;
+    return function runConcurrentSafePromise(promise) {
+      basePromiseId++;
+      var currentPromiseId = basePromiseId;
+      return Promise.resolve(promise).then(function (x) {
+        // The promise might take too long to resolve and get outdated. This would
+        // result in resolving stale values.
+        // When this happens, we ignore the promise value and return the one
+        // coming from the latest resolved value.
+        //
+        // +----------------------------------+
+        // |        100ms                     |
+        // | run(1) +--->  R1                 |
+        // |        300ms                     |
+        // | run(2) +-------------> R2 (SKIP) |
+        // |        200ms                     |
+        // | run(3) +--------> R3             |
+        // +----------------------------------+
+        if (latestResolvedValue && currentPromiseId < latestResolvedId) {
+          return latestResolvedValue;
+        }
 
-    return {
-      setActiveItemId: setActiveItemId,
-      setQuery: setQuery,
-      setCollections: setCollections,
-      setIsOpen: setIsOpen,
-      setStatus: setStatus,
-      setContext: setContext
+        latestResolvedId = currentPromiseId;
+        latestResolvedValue = x;
+        return x;
+      });
     };
   }
 
@@ -418,7 +475,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`).
@@ -582,6 +639,78 @@
     };
   }
 
+  function createStore(reducer, props, onStoreStateChange) {
+    var state = props.initialState;
+    return {
+      getState: function getState() {
+        return state;
+      },
+      dispatch: function dispatch(action, payload) {
+        var prevState = _objectSpread2({}, state);
+
+        state = reducer(state, {
+          type: action,
+          props: props,
+          payload: payload
+        });
+        onStoreStateChange({
+          state: state,
+          prevState: prevState
+        });
+      },
+      pendingRequests: createCancelablePromiseList()
+    };
+  }
+
+  function getAutocompleteSetters(_ref) {
+    var store = _ref.store;
+
+    var setActiveItemId = function setActiveItemId(value) {
+      store.dispatch('setActiveItemId', value);
+    };
+
+    var setQuery = function setQuery(value) {
+      store.dispatch('setQuery', value);
+    };
+
+    var setCollections = function setCollections(rawValue) {
+      var baseItemId = 0;
+      var value = rawValue.map(function (collection) {
+        return _objectSpread2(_objectSpread2({}, collection), {}, {
+          // We flatten the stored items to support calling `getAlgoliaResults`
+          // from the source itself.
+          items: flatten(collection.items).map(function (item) {
+            return _objectSpread2(_objectSpread2({}, item), {}, {
+              __autocomplete_id: baseItemId++
+            });
+          })
+        });
+      });
+      store.dispatch('setCollections', value);
+    };
+
+    var setIsOpen = function setIsOpen(value) {
+      store.dispatch('setIsOpen', value);
+    };
+
+    var setStatus = function setStatus(value) {
+      store.dispatch('setStatus', value);
+    };
+
+    var setContext = function setContext(value) {
+      store.dispatch('setContext', value);
+    };
+
+    return {
+      setActiveItemId: setActiveItemId,
+      setQuery: setQuery,
+      setCollections: setCollections,
+      setIsOpen: setIsOpen,
+      setStatus: setStatus,
+      setContext: setContext
+    };
+  }
+
   function getDefaultProps(props, pluginSubscribers) {
     var _props$id;
 
@@ -812,7 +941,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 {
@@ -822,7 +951,9 @@
     });
   }
 
+  var _excluded$2 = ["event", "nextState", "props", "query", "refresh", "store"];
   var lastStalledId = null;
+  var runConcurrentSafePromise = createConcurrentSafePromise();
   function onInput(_ref) {
     var event = _ref.event,
         _ref$nextState = _ref.nextState,
@@ -831,7 +962,7 @@
         query = _ref.query,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, ["event", "nextState", "props", "query", "refresh", "store"]);
+        setters = _objectWithoutProperties(_ref, _excluded$2);
 
     if (lastStalledId) {
       props.environment.clearTimeout(lastStalledId);
@@ -848,28 +979,42 @@
     if (!query && props.openOnFocus === false) {
       var _nextState$isOpen;
 
-      setStatus('idle');
-      setCollections(store.getState().collections.map(function (collection) {
+      var collections = store.getState().collections.map(function (collection) {
         return _objectSpread2(_objectSpread2({}, collection), {}, {
           items: []
         });
-      }));
+      });
+      setStatus('idle');
+      setCollections(collections);
       setIsOpen((_nextState$isOpen = nextState.isOpen) !== null && _nextState$isOpen !== void 0 ? _nextState$isOpen : props.shouldPanelOpen({
         state: store.getState()
+      })); // We make sure to update the latest resolved value of the tracked
+      // promises to keep late resolving promises from "cancelling" the state
+      // updates performed in this code path.
+      // We chain with a void promise to respect `onInput`'s expected return type.
+
+      var _request = cancelable(runConcurrentSafePromise(collections).then(function () {
+        return Promise.resolve();
       }));
-      return Promise.resolve();
+
+      return store.pendingRequests.add(_request);
     }
 
     setStatus('loading');
     lastStalledId = props.environment.setTimeout(function () {
       setStatus('stalled');
-    }, props.stallThreshold);
-    return props.getSources(_objectSpread2({
+    }, props.stallThreshold); // We track the entire promise chain triggered by `onInput` before mutating
+    // the Autocomplete state to make sure that any state manipulation is based on
+    // fresh data regardless of when promises individually resolve.
+    // We don't track nested promises and only rely on the full chain resolution,
+    // meaning we should only ever manipulate the state once this concurrent-safe
+    // promise is resolved.
+
+    var request = cancelable(runConcurrentSafePromise(props.getSources(_objectSpread2({
       query: query,
       refresh: refresh,
       state: store.getState()
     }, setters)).then(function (sources) {
-      setStatus('loading');
       return Promise.all(sources.map(function (source) {
         return Promise.resolve(source.getItems(_objectSpread2({
           query: query,
@@ -886,46 +1031,54 @@
           props: props,
           state: store.getState()
         });
-      }).then(function (collections) {
-        var _nextState$isOpen2;
+      });
+    }))).then(function (collections) {
+      var _nextState$isOpen2;
 
-        setStatus('idle');
-        setCollections(collections);
-        var isPanelOpen = props.shouldPanelOpen({
+      // 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');
+      setCollections(collections);
+      var isPanelOpen = props.shouldPanelOpen({
+        state: store.getState()
+      });
+      setIsOpen((_nextState$isOpen2 = nextState.isOpen) !== null && _nextState$isOpen2 !== void 0 ? _nextState$isOpen2 : props.openOnFocus && !query && isPanelOpen || isPanelOpen);
+      var highlightedItem = getActiveItem(store.getState());
+
+      if (store.getState().activeItemId !== null && highlightedItem) {
+        var item = highlightedItem.item,
+            itemInputValue = highlightedItem.itemInputValue,
+            itemUrl = highlightedItem.itemUrl,
+            source = highlightedItem.source;
+        source.onActive(_objectSpread2({
+          event: event,
+          item: item,
+          itemInputValue: itemInputValue,
+          itemUrl: itemUrl,
+          refresh: refresh,
+          source: source,
           state: store.getState()
-        });
-        setIsOpen((_nextState$isOpen2 = nextState.isOpen) !== null && _nextState$isOpen2 !== void 0 ? _nextState$isOpen2 : props.openOnFocus && !query && isPanelOpen || isPanelOpen);
-        var highlightedItem = getActiveItem(store.getState());
+        }, setters));
+      }
+    }).finally(function () {
+      setStatus('idle');
 
-        if (store.getState().activeItemId !== null && highlightedItem) {
-          var item = highlightedItem.item,
-              itemInputValue = highlightedItem.itemInputValue,
-              itemUrl = highlightedItem.itemUrl,
-              source = highlightedItem.source;
-          source.onActive(_objectSpread2({
-            event: event,
-            item: item,
-            itemInputValue: itemInputValue,
-            itemUrl: itemUrl,
-            refresh: refresh,
-            source: source,
-            state: store.getState()
-          }, setters));
-        }
-      }).finally(function () {
-        if (lastStalledId) {
-          props.environment.clearTimeout(lastStalledId);
-        }
-      });
+      if (lastStalledId) {
+        props.environment.clearTimeout(lastStalledId);
+      }
     });
+    return store.pendingRequests.add(request);
   }
 
+  var _excluded$1 = ["event", "props", "refresh", "store"];
   function onKeyDown(_ref) {
     var event = _ref.event,
         props = _ref.props,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, ["event", "props", "refresh", "store"]);
+        setters = _objectWithoutProperties(_ref, _excluded$1);
 
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       // eslint-disable-next-line no-inner-declarations
@@ -994,7 +1147,12 @@
       // 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
+      // pending and could reopen the panel once they resolve, because that would
+      // result in an unsolicited UI behavior.
+
+      store.pendingRequests.cancelAll();
     } else if (event.key === 'Enter') {
       // No active item, so we let the browser handle the native `onSubmit` form
       // event.
@@ -1091,17 +1249,22 @@
     }
   }
 
+  var _excluded = ["props", "refresh", "store"],
+      _excluded2 = ["inputElement", "formElement", "panelElement"],
+      _excluded3 = ["inputElement"],
+      _excluded4 = ["inputElement", "maxLength"],
+      _excluded5 = ["item", "source"];
   function getPropGetters(_ref) {
     var props = _ref.props,
         refresh = _ref.refresh,
         store = _ref.store,
-        setters = _objectWithoutProperties(_ref, ["props", "refresh", "store"]);
+        setters = _objectWithoutProperties(_ref, _excluded);
 
     var getEnvironmentProps = function getEnvironmentProps(providedProps) {
       var inputElement = providedProps.inputElement,
           formElement = providedProps.formElement,
           panelElement = providedProps.panelElement,
-          rest = _objectWithoutProperties(providedProps, ["inputElement", "formElement", "panelElement"]);
+          rest = _objectWithoutProperties(providedProps, _excluded2);
 
       return _objectSpread2({
         // On touch devices, we do not rely on the native `blur` event of the
@@ -1109,19 +1272,34 @@
         // outside of the autocomplete elements.
         // This ensures a working experience on mobile because we blur the input
         // on touch devices when the user starts scrolling (`touchmove`).
+        // @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 pending requests
+          //   (no interaction with the autocomplete, no future state updates)
+          // - OR the touched target is the input element (should open the panel)
+          var isAutocompleteInteraction = store.getState().isOpen || !store.pendingRequests.isEmpty();
+
+          if (!isAutocompleteInteraction || event.target === inputElement) {
             return;
-          } // @TODO: support cases where there are multiple Autocomplete instances.
-          // Right now, a second instance makes this computation return false.
-
+          }
 
           var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
-            return isOrContainsNode(contextNode, event.target) || isOrContainsNode(contextNode, props.environment.document.activeElement);
+            return isOrContainsNode(contextNode, event.target);
           });
 
           if (isTargetWithinAutocomplete === false) {
-            store.dispatch('blur', null);
+            store.dispatch('blur', null); // If requests are still pending 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) {
+              store.pendingRequests.cancelAll();
+            }
           }
         },
         // When scrolling on touch devices (mobiles, tablets, etc.), we want to
@@ -1149,8 +1327,8 @@
     };
 
     var getFormProps = function getFormProps(providedProps) {
-      var inputElement = providedProps.inputElement,
-          rest = _objectWithoutProperties(providedProps, ["inputElement"]);
+      providedProps.inputElement;
+          var rest = _objectWithoutProperties(providedProps, _excluded3);
 
       return _objectSpread2({
         action: '',
@@ -1202,11 +1380,11 @@
 
       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, ["inputElement", "maxLength"]);
+          rest = _objectWithoutProperties(_ref2, _excluded4);
 
       var activeItem = getActiveItem(store.getState());
       return _objectSpread2({
@@ -1247,7 +1425,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 pending 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) {
+              store.pendingRequests.cancelAll();
+            }
           }
         },
         onClick: function onClick(event) {
@@ -1297,7 +1482,7 @@
     var getItemProps = function getItemProps(providedProps) {
       var item = providedProps.item,
           source = providedProps.source,
-          rest = _objectWithoutProperties(providedProps, ["item", "source"]);
+          rest = _objectWithoutProperties(providedProps, _excluded5);
 
       return _objectSpread2({
         id: "".concat(props.id, "-item-").concat(item.__autocomplete_id),
@@ -1384,6 +1569,44 @@
     };
   }
 
+  function getMetadata(_ref) {
+    var _, _options$__autocomple, _options$__autocomple2, _options$__autocomple3;
+
+    var plugins = _ref.plugins,
+        options = _ref.options;
+    var optionsKey = (_ = (((_options$__autocomple = options.__autocomplete_metadata) === null || _options$__autocomple === void 0 ? void 0 : _options$__autocomple.userAgents) || [])[0]) === null || _ === void 0 ? void 0 : _.segment;
+    var extraOptions = optionsKey ? _defineProperty({}, optionsKey, Object.keys(((_options$__autocomple2 = options.__autocomplete_metadata) === null || _options$__autocomple2 === void 0 ? void 0 : _options$__autocomple2.options) || {})) : {};
+    return {
+      plugins: plugins.map(function (plugin) {
+        return {
+          name: plugin.name,
+          options: Object.keys(plugin.__autocomplete_pluginOptions || [])
+        };
+      }),
+      options: _objectSpread2({
+        'autocomplete-core': Object.keys(options)
+      }, extraOptions),
+      ua: userAgents.concat(((_options$__autocomple3 = options.__autocomplete_metadata) === null || _options$__autocomple3 === void 0 ? void 0 : _options$__autocomple3.userAgents) || [])
+    };
+  }
+  function injectMetadata(_ref3) {
+    var _environment$navigato;
+
+    var metadata = _ref3.metadata,
+        environment = _ref3.environment;
+    var isMetadataEnabled = (_environment$navigato = environment.navigator) === null || _environment$navigato === void 0 ? void 0 : _environment$navigato.userAgent.includes('Algolia Crawler');
+
+    if (isMetadataEnabled) {
+      var metadataContainer = environment.document.createElement('meta');
+      var headRef = environment.document.querySelector('head');
+      metadataContainer.name = 'algolia:metadata';
+      setTimeout(function () {
+        metadataContainer.content = JSON.stringify(metadata);
+        headRef.appendChild(metadataContainer);
+      }, 0);
+    }
+  }
+
   function getCompletion(_ref) {
     var _getActiveItem;
 
@@ -1603,18 +1826,22 @@
         }
       }));
     });
+    injectMetadata({
+      metadata: getMetadata({
+        plugins: props.plugins,
+        options: options
+      }),
+      environment: props.environment
+    });
     return _objectSpread2(_objectSpread2({
       refresh: refresh
     }, propGetters), setters);
   }
 
-  var version = '1.4.0';
-
   exports.createAutocomplete = createAutocomplete;
   exports.getDefaultProps = getDefaultProps;
-  exports.version = version;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=index.development.js.map