@algolia/autocomplete-core 1.6.3 → 1.7.0

package/dist/esm/getPropGetters.js

@@ -14,6 +14,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+import { noop } from '@algolia/autocomplete-shared';
 import { onInput } from './onInput';
 import { onKeyDown as _onKeyDown } from './onKeyDown';
 import { getActiveItem, isOrContainsNode, isSamsung } from './utils';
@@ -29,42 +30,49 @@ export function getPropGetters(_ref) {
         panelElement = providedProps.panelElement,
         rest = _objectWithoutProperties(providedProps, _excluded2);
 
-    return _objectSpread({
-      // On touch devices, we do not rely on the native `blur` event of the
-      // input to close the panel, but rather on a custom `touchstart` event
-      // 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.
+    function onMouseDownOrTouchStart(event) {
+      // The `onTouchStart`/`onMouseDown` events 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.
-      onTouchStart: function onTouchStart(event) {
-        // 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;
-        }
 
-        var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
-          return isOrContainsNode(contextNode, event.target);
-        });
 
-        if (isTargetWithinAutocomplete === false) {
-          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.
+      var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
+        return isOrContainsNode(contextNode, event.target);
+      });
 
-          if (!props.debug) {
-            store.pendingRequests.cancelAll();
-          }
+      if (isTargetWithinAutocomplete === false) {
+        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();
         }
-      },
+      }
+    }
+
+    return _objectSpread({
+      // We do not rely on the native `blur` event of the input to close the
+      // panel, but rather on a custom `touchstart`/`mousedown` event outside
+      // of the autocomplete elements.
+      // This ensures we don't mistakenly interpret interactions within the
+      // autocomplete (but outside of the input) as a signal to close the panel.
+      // For example, clicking reset button causes an input blur, but if
+      // `openOnFocus=true`, it shouldn't close the panel.
+      // On touch devices, scrolling results (`touchmove`) causes an input blur
+      // but shouldn't close the panel.
+      onTouchStart: onMouseDownOrTouchStart,
+      onMouseDown: onMouseDownOrTouchStart,
       // When scrolling on touch devices (mobiles, tablets, etc.), we want to
       // mimic the native platform behavior where the input is blurred to
       // hide the virtual keyboard. This gives more vertical space to
@@ -143,8 +151,6 @@ export function getPropGetters(_ref) {
       store.dispatch('focus', null);
     }
 
-    var isTouchDevice = ('ontouchstart' in props.environment);
-
     var _ref2 = providedProps || {},
         inputElement = _ref2.inputElement,
         _ref2$maxLength = _ref2.maxLength,
@@ -189,20 +195,10 @@ export function getPropGetters(_ref) {
         }, setters));
       },
       onFocus: onFocus,
-      onBlur: function onBlur() {
-        // We do rely on the `blur` event on touch devices.
-        // See explanation in `onTouchStart`.
-        if (!isTouchDevice) {
-          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();
-          }
-        }
-      },
+      // We don't rely on the `blur` event.
+      // See explanation in `onTouchStart`/`onMouseDown`.
+      // @MAJOR See if we need to keep this handler.
+      onBlur: noop,
       onClick: function onClick(event) {
         // When the panel is closed and you click on the input while
         // the input is focused, the `onFocus` event is not triggered

package/dist/esm/onKeyDown.js

@@ -91,6 +91,13 @@ export function onKeyDown(_ref) {
     // 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 === 'Tab') {
+    store.dispatch('blur', 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
@@ -98,6 +105,14 @@ export function onKeyDown(_ref) {
     if (store.getState().activeItemId === null || store.getState().collections.every(function (collection) {
       return collection.items.length === 0;
     })) {
+      // If requests are still pending when the panel closes, 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();
+      }
+
       return;
     } // This prevents the `onSubmit` event to be sent because an item is
     // highlighted.

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

@@ -18,6 +18,7 @@ export declare type GetEnvironmentProps = (props: {
 }) => {
     onTouchStart(event: TouchEvent): void;
     onTouchMove(event: TouchEvent): void;
+    onMouseDown(event: MouseEvent): void;
 };
 export declare type GetRootProps = (props?: {
     [key: string]: unknown;

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

@@ -1,7 +1,21 @@
 import { CancelablePromise } from '.';
 export declare type CancelablePromiseList<TValue> = {
+    /**
+     * Add a cancelable promise to the list.
+     *
+     * @param cancelablePromise The cancelable promise to add.
+     */
     add(cancelablePromise: CancelablePromise<TValue>): CancelablePromise<TValue>;
+    /**
+     * Cancel all pending promises.
+     *
+     * Requests aren't actually stopped. All pending promises will settle, but
+     * attached handlers won't run.
+     */
     cancelAll(): void;
+    /**
+     * Whether there are pending promises in the list.
+     */
     isEmpty(): boolean;
 };
 export declare function createCancelablePromiseList<TValue>(): CancelablePromiseList<TValue>;

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-core 1.6.3 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-core 1.7.0 | 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) :
@@ -264,7 +264,7 @@
 
   var noop = function noop() {};
 
-  var version = '1.6.3';
+  var version = '1.7.0';
 
   var userAgents = [{
     segment: 'autocomplete-core',
@@ -1135,6 +1135,13 @@
       // 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 === 'Tab') {
+      store.dispatch('blur', 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
@@ -1142,6 +1149,14 @@
       if (store.getState().activeItemId === null || store.getState().collections.every(function (collection) {
         return collection.items.length === 0;
       })) {
+        // If requests are still pending when the panel closes, 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();
+        }
+
         return;
       } // This prevents the `onSubmit` event to be sent because an item is
       // highlighted.
@@ -1249,42 +1264,49 @@
           panelElement = providedProps.panelElement,
           rest = _objectWithoutProperties(providedProps, _excluded2);
 
-      return _objectSpread2({
-        // On touch devices, we do not rely on the native `blur` event of the
-        // input to close the panel, but rather on a custom `touchstart` event
-        // 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.
+      function onMouseDownOrTouchStart(event) {
+        // The `onTouchStart`/`onMouseDown` events 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.
-        onTouchStart: function onTouchStart(event) {
-          // 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;
-          }
 
-          var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
-            return isOrContainsNode(contextNode, event.target);
-          });
 
-          if (isTargetWithinAutocomplete === false) {
-            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.
+        var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
+          return isOrContainsNode(contextNode, event.target);
+        });
 
-            if (!props.debug) {
-              store.pendingRequests.cancelAll();
-            }
+        if (isTargetWithinAutocomplete === false) {
+          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();
           }
-        },
+        }
+      }
+
+      return _objectSpread2({
+        // We do not rely on the native `blur` event of the input to close the
+        // panel, but rather on a custom `touchstart`/`mousedown` event outside
+        // of the autocomplete elements.
+        // This ensures we don't mistakenly interpret interactions within the
+        // autocomplete (but outside of the input) as a signal to close the panel.
+        // For example, clicking reset button causes an input blur, but if
+        // `openOnFocus=true`, it shouldn't close the panel.
+        // On touch devices, scrolling results (`touchmove`) causes an input blur
+        // but shouldn't close the panel.
+        onTouchStart: onMouseDownOrTouchStart,
+        onMouseDown: onMouseDownOrTouchStart,
         // When scrolling on touch devices (mobiles, tablets, etc.), we want to
         // mimic the native platform behavior where the input is blurred to
         // hide the virtual keyboard. This gives more vertical space to
@@ -1363,8 +1385,6 @@
         store.dispatch('focus', null);
       }
 
-      var isTouchDevice = ('ontouchstart' in props.environment);
-
       var _ref2 = providedProps || {};
           _ref2.inputElement;
           var _ref2$maxLength = _ref2.maxLength,
@@ -1409,20 +1429,10 @@
           }, setters));
         },
         onFocus: onFocus,
-        onBlur: function onBlur() {
-          // We do rely on the `blur` event on touch devices.
-          // See explanation in `onTouchStart`.
-          if (!isTouchDevice) {
-            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();
-            }
-          }
-        },
+        // We don't rely on the `blur` event.
+        // See explanation in `onTouchStart`/`onMouseDown`.
+        // @MAJOR See if we need to keep this handler.
+        onBlur: noop,
         onClick: function onClick(event) {
           // When the panel is closed and you click on the input while
           // the input is focused, the `onFocus` event is not triggered