@algolia/autocomplete-js 1.6.3 → 1.7.0

package/dist/esm/createAutocompleteDom.js

@@ -78,10 +78,7 @@ export function createAutocompleteDom(_ref) {
     getInputProps: propGetters.getInputProps,
     getInputPropsCore: autocomplete.getInputProps,
     autocompleteScopeApi: autocompleteScopeApi,
-    onDetachedEscape: isDetached ? function () {
-      autocomplete.setIsOpen(false);
-      setIsModalOpen(false);
-    } : undefined
+    isDetached: isDetached
   });
   var inputWrapperPrefix = createDomElement('div', {
     class: classNames.inputWrapperPrefix,

package/dist/esm/elements/Input.d.ts

@@ -6,7 +6,7 @@ declare type InputProps = {
     environment: AutocompleteEnvironment;
     getInputProps: AutocompletePropGetters<any>['getInputProps'];
     getInputPropsCore: AutocompleteCoreApi<any>['getInputProps'];
-    onDetachedEscape?(): void;
+    isDetached: boolean;
     state: AutocompleteState<any>;
 };
 export declare const Input: AutocompleteElement<InputProps, HTMLInputElement>;

package/dist/esm/elements/Input.js

@@ -1,4 +1,4 @@
-var _excluded = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "onDetachedEscape", "state"];
+var _excluded = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "isDetached", "state"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18,7 +18,7 @@ export var Input = function Input(_ref) {
       classNames = _ref.classNames,
       getInputProps = _ref.getInputProps,
       getInputPropsCore = _ref.getInputPropsCore,
-      onDetachedEscape = _ref.onDetachedEscape,
+      isDetached = _ref.isDetached,
       state = _ref.state,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -33,9 +33,8 @@ export var Input = function Input(_ref) {
   }, autocompleteScopeApi));
   setProperties(element, _objectSpread(_objectSpread({}, inputProps), {}, {
     onKeyDown: function onKeyDown(event) {
-      if (onDetachedEscape && event.key === 'Escape') {
-        event.preventDefault();
-        onDetachedEscape();
+      // In detached mode we don't want to close the panel when hittin `Tab`.
+      if (isDetached && event.key === 'Tab') {
         return;
       }
 

package/dist/esm/getDefaultOptions.d.ts

@@ -9,12 +9,14 @@ export declare function getDefaultOptions<TItem extends BaseItem>(options: Autoc
             props: {
                 onTouchStart(event: TouchEvent): void;
                 onTouchMove(event: TouchEvent): void;
+                onMouseDown(event: MouseEvent): void;
             };
         } & {
             state: import("./types").AutocompleteState<TItem>;
         } & import("@algolia/autocomplete-core").AutocompleteScopeApi<TItem>) => {
             onTouchStart(event: TouchEvent): void;
             onTouchMove(event: TouchEvent): void;
+            onMouseDown(event: MouseEvent): void;
         };
         getFormProps: (params: {
             props: {

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.6.3 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 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) :
@@ -353,7 +353,7 @@
 
   var noop = function noop() {};
 
-  var version = '1.6.3';
+  var version = '1.7.0';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -1751,6 +1751,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
@@ -1758,6 +1765,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.
@@ -1942,42 +1957,49 @@
           panelElement = providedProps.panelElement,
           rest = _objectWithoutProperties$1(providedProps, _excluded2);
 
-      return _objectSpread$6({
-        // 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 (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();
-            }
+          if (!props.debug) {
+            store.pendingRequests.cancelAll();
           }
-        },
+        }
+      }
+
+      return _objectSpread$6({
+        // 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
@@ -2056,8 +2078,6 @@
         store.dispatch('focus', null);
       }
 
-      var isTouchDevice = ('ontouchstart' in props.environment);
-
       var _ref2 = providedProps || {};
           _ref2.inputElement;
           var _ref2$maxLength = _ref2.maxLength,
@@ -2102,20 +2122,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
@@ -2851,14 +2861,14 @@
     };
   }
 
-  var _excluded$3 = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "onDetachedEscape", "state"];
+  var _excluded$3 = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "isDetached", "state"];
   var Input = function Input(_ref) {
     var autocompleteScopeApi = _ref.autocompleteScopeApi,
         environment = _ref.environment;
         _ref.classNames;
         var getInputProps = _ref.getInputProps,
         getInputPropsCore = _ref.getInputPropsCore,
-        onDetachedEscape = _ref.onDetachedEscape,
+        isDetached = _ref.isDetached,
         state = _ref.state,
         props = _objectWithoutProperties$4(_ref, _excluded$3);
 
@@ -2873,9 +2883,8 @@
     }, autocompleteScopeApi));
     setProperties(element, _objectSpread2(_objectSpread2({}, inputProps), {}, {
       onKeyDown: function onKeyDown(event) {
-        if (onDetachedEscape && event.key === 'Escape') {
-          event.preventDefault();
-          onDetachedEscape();
+        // In detached mode we don't want to close the panel when hittin `Tab`.
+        if (isDetached && event.key === 'Tab') {
           return;
         }
 
@@ -2981,10 +2990,7 @@
       getInputProps: propGetters.getInputProps,
       getInputPropsCore: autocomplete.getInputProps,
       autocompleteScopeApi: autocompleteScopeApi,
-      onDetachedEscape: isDetached ? function () {
-        autocomplete.setIsOpen(false);
-        setIsModalOpen(false);
-      } : undefined
+      isDetached: isDetached
     });
     var inputWrapperPrefix = createDomElement('div', {
       class: classNames.inputWrapperPrefix,