feat(core): introduce debug mode (#315)

Author: francoischalifour

examples/js/app.js

@@ -12,6 +12,7 @@ const searchClient = algoliasearch(
 
 autocomplete({
   container: '#autocomplete',
+  debug: true,
   getSources() {
     return [
       {

packages/autocomplete-core/src/getDefaultProps.ts

@@ -14,6 +14,7 @@ export function getDefaultProps<TItem>(
     : {}) as typeof window;
 
   return {
+    debug: false,
     openOnFocus: false,
     placeholder: '',
     autoFocus: false,

packages/autocomplete-core/src/stateReducer.ts

@@ -125,6 +125,10 @@ export const stateReducer: Reducer = (action, state, props) => {
     }
 
     case 'blur': {
+      if (props.debug) {
+        return state;
+      }
+
       return {
         ...state,
         isOpen: false,

packages/autocomplete-core/src/types/api.ts

@@ -7,8 +7,7 @@ export interface AutocompleteApi<
   TEvent = Event,
   TMouseEvent = MouseEvent,
   TKeyboardEvent = KeyboardEvent
->
-  extends AutocompleteSetters<TItem>,
+> extends AutocompleteSetters<TItem>,
     AutocompleteAccessibilityGetters<
       TItem,
       TEvent,
@@ -155,6 +154,15 @@ interface Navigator<TItem> {
 }
 
 export interface PublicAutocompleteOptions<TItem> {
+  /**
+   * Whether to consider the experience in debug mode.
+   *
+   * The debug mode is useful when developing because it doesn't close
+   * the dropdown when the blur event occurs.
+   *
+   * @default false
+   */
+  debug?: boolean;
   /**
    * The Autocomplete ID to create accessible attributes.
    *
@@ -243,6 +251,7 @@ export interface PublicAutocompleteOptions<TItem> {
 
 // Props manipulated internally with default values.
 export interface AutocompleteOptions<TItem> {
+  debug: boolean;
   id: string;
   onStateChange<TItem>(props: { state: AutocompleteState<TItem> }): void;
   placeholder: string;

packages/website/docs/partials/createAutocomplete-props.md

@@ -97,3 +97,9 @@ The function called when the autocomplete form is submitted.
 The function called when the input changes.
 
 This turns the experience in controlled mode, leaving you in charge of updating the state.
+
+## `debug`
+
+> `boolean` | defaults to `false`
+
+Whether to consider the experience in debug mode. It is useful when developing because it doesn't close the dropdown when the blur event occurs.