@mackin.com/styleguide 9.2.2 → 9.2.5

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({
@@ -1087,6 +1090,9 @@ const Autocomplete = (p) => {
                                     (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
                                 }
                                 else if (e.key === 'Enter') {
+                                    e.stopPropagation();
+                                    // this will prevent the click event from firing in addition to this enter key event.
+                                    e.preventDefault();
                                     onPickValue(v);
                                 }
                             }, className: css.cx(buttonMarkerClass + listItemIndex, css.css({
@@ -3634,20 +3640,21 @@ const SearchBox = React__namespace.forwardRef((props, ref) => {
         return props.onSubmit();
     });
     const theme = useThemeSafely();
-    let button;
     const buttonStyles = css.cx(css.css({
         color: `${theme.colors.font} !important;`,
         fontSize: '1rem'
     }), props.buttonClassName);
+    let clearButton;
     if (props.onClear && !!props.value) {
-        button = (React__namespace.createElement(Button, { onClick: props.onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
-            React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'clear', spin: waiting })));
-    }
-    else {
-        button = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
-            React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
-    }
-    const input = (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: props.inputWrapperClassName, className: props.inputClassName, rightControl: button })));
+        clearButton = (React__namespace.createElement(Button, { onClick: props.onClear, tabIndex: -1, disabled: waiting, className: buttonStyles, variant: "icon", small: true },
+            React__namespace.createElement(Icon, { id: "clear" })));
+    }
+    const saveButton = (React__namespace.createElement(Button, { tabIndex: -1, disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: buttonStyles, variant: "icon", small: true },
+        React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
+    const rightControls = clearButton ? React__namespace.createElement(React__namespace.Fragment, null,
+        clearButton,
+        saveButton) : saveButton;
+    const input = (React__namespace.createElement(TextInput, Object.assign({}, inputProps, { ref: ref, wrapperClassName: props.inputWrapperClassName, className: props.inputClassName, rightControl: rightControls })));
     const searchBoxWrapperStyles = css.cx(css.css({
         label: 'SearchBox'
     }), props.wrapperClassName);

package/package.json

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