@mackin.com/styleguide 9.2.0 → 9.2.3

package/index.d.ts

@@ -1097,7 +1097,6 @@ interface AutoCompleteConfig {
     debounceMs?: number;
 }
 
-/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
 declare class AutocompleteController {
     constructor(getOptions: (value: string | undefined) => Promise<string[]>, config?: AutoCompleteConfig);
     get value(): string | undefined;

package/index.js

@@ -1012,21 +1012,24 @@ const Autocomplete = (p) => {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
     const onPickValue = (v) => {
-        p.onPick(v);
-        // wait for the re-render.  the value will not update if the control has focus
+        var _a;
+        // the TextInput will not respond to outer value changes if it has focus.
+        // here we clear first and then onPickValue will re-focus after all updates.
+        (_a = input.current) === null || _a === void 0 ? void 0 : _a.blur();
         setTimeout(() => {
-            var _a;
-            (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+            // blur is now complete
+            p.onPick(v);
+            // wait for the re-render.  the value will not update if the control has focus
+            setTimeout(() => {
+                var _a;
+                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
         }, 0);
     };
     return (React__namespace.createElement("div", { onClick: e => {
             e.stopPropagation();
         }, onKeyDown: e => {
-            var _a;
             if (e.key === 'Escape') {
-                // the TextInput will not respond to outer value changes if it has focus.
-                // here we clear first and then onPickValue will re-focus after all updates.
-                (_a = input.current) === null || _a === void 0 ? void 0 : _a.blur();
                 onPickValue(undefined);
             }
         }, ref: element, className: css.cx(css.css({
@@ -4656,7 +4659,6 @@ const TabContainer = (p) => {
 };
 
 const defaultMinChars = 3;
-/** Extracted logic around autocomplete functionality for Autocomplete.tsx. */
 class AutocompleteController {
     constructor(getOptions, config) {
         var _a;
@@ -4664,10 +4666,7 @@ class AutocompleteController {
         this._options = [];
         this._minChars = (_a = config === null || config === void 0 ? void 0 : config.minChars) !== null && _a !== void 0 ? _a : defaultMinChars;
         if (config === null || config === void 0 ? void 0 : config.debounceMs) {
-            this.getOptions = lodash.debounce(getOptions, config.debounceMs, {
-                leading: false,
-                trailing: true
-            });
+            this.getOptions = createDebouncedPromise(getOptions, config === null || config === void 0 ? void 0 : config.debounceMs);
         }
         else {
             this.getOptions = getOptions;
@@ -4680,7 +4679,6 @@ class AutocompleteController {
         return this._options;
     }
     async onChange(newValue) {
-        var _a;
         // don't make getOptions calls if the value hasn't changed.
         if (newValue === this.value) {
             return;
@@ -4699,19 +4697,46 @@ class AutocompleteController {
         }
         try {
             this._value = newValue;
-            // debounce (if used) will return undefined until the actual function is executed.
-            // after that it will return the result of the last execution.
-            this._options = (_a = (await this.getOptions(newValue))) !== null && _a !== void 0 ? _a : [];
+            this._options = (await this.getOptions(newValue));
         }
         catch (err) {
-            // the getOptions method needs to handle it's own errors
+            // this method will throw errors on debounce rejections. that is to be expected.
+            // for actual getOptions exceptions, the owner of that function will need to handle errors.
         }
     }
     onPick(newValue) {
         this._value = newValue;
         this._options = [];
     }
-}
+}
+const createDebouncedPromise = (originalFunction, trailingTimeoutMs) => {
+    let timer;
+    let onCancel;
+    return (value) => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        if (onCancel) {
+            onCancel('Promise cancelled due to in-progress debounce call.');
+            onCancel = undefined;
+        }
+        return new Promise((res, rej) => {
+            onCancel = rej;
+            timer = setTimeout(() => {
+                originalFunction(value)
+                    .then(values => {
+                    res(values);
+                })
+                    .catch(err => {
+                    rej(err);
+                })
+                    .finally(() => {
+                    clearTimeout(timer);
+                });
+            }, trailingTimeoutMs);
+        });
+    };
+};
 
 /** Extracted logic around autocomplete functionality for Autocomplete.tsx that supports Entity (id/name) mapping. */
 class AutocompleteEntityController {
@@ -4736,7 +4761,11 @@ class AutocompleteEntityController {
         return this._options.map(o => o.name);
     }
     async onChange(newValue) {
+        const clearEntity = newValue !== this._ctrl.value;
         await this._ctrl.onChange(newValue);
+        if (clearEntity) {
+            this._pickedEntity = undefined;
+        }
         this.trySyncCtrlOptions();
     }
     onPick(newValue) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "9.2.0",
+    "version": "9.2.3",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",