@adamjanicki/ui-extended 1.1.1 → 1.1.2

package/components/Autocomplete.d.ts

@@ -60,10 +60,6 @@ interface Props<T> {
      * Allow free text input
      */
     freeSolo?: boolean;
-    /**
-     * Focus on the input field after selecting an option
-     */
-    focusOnSelect?: boolean;
     /**
      * Props for the input field
      */
@@ -93,6 +89,11 @@ interface Props<T> {
      * A callback to be called when the user hits the enter key while no option is selected
      */
     onUnselectedEnter?: () => void;
+    /**
+     * Whether or not to leave the popover open after a selection occurs
+     * @default false
+     */
+    remainOpenOnSelectOrEnter?: boolean;
 }
 declare const Autocomplete: <T>(props: Props<T>) => JSX.Element;
 export default Autocomplete;

package/components/Autocomplete.js

@@ -29,7 +29,7 @@ import { classNames } from "@adamjanicki/ui/functions";
 var defaultRenderOption = function (option) { return (_jsx("div", { className: "ajui-autocomplete-default-rendering", children: "".concat(option) })); };
 var Autocomplete = function (props) {
     var _a, _b;
-    var options = props.options, _c = props.renderOption, renderOption = _c === void 0 ? defaultRenderOption : _c, _d = props.filterOption, filterOption = _d === void 0 ? function () { return true; } : _d, groupBy = props.groupBy, renderGroup = props.renderGroup, noOptionsNode = props.noOptionsNode, _e = props.InputProps, InputProps = _e === void 0 ? {} : _e, _f = props.freeSolo, freeSolo = _f === void 0 ? false : _f, _g = props.focusOnSelect, focusOnSelect = _g === void 0 ? true : _g, value = props.value, onInputChange = props.onInputChange, onSelect = props.onSelect, popoverProps = props.popoverProps, footer = props.footer, _h = props.listItemProps, listItemProps = _h === void 0 ? {} : _h, _j = props.listProps, listProps = _j === void 0 ? {} : _j, onUnselectedEnter = props.onUnselectedEnter, _k = props.closeOnFooterClick, closeOnFooterClick = _k === void 0 ? true : _k, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "focusOnSelect", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter", "closeOnFooterClick"]);
+    var options = props.options, _c = props.renderOption, renderOption = _c === void 0 ? defaultRenderOption : _c, _d = props.filterOption, filterOption = _d === void 0 ? function () { return true; } : _d, groupBy = props.groupBy, renderGroup = props.renderGroup, noOptionsNode = props.noOptionsNode, _e = props.InputProps, InputProps = _e === void 0 ? {} : _e, _f = props.freeSolo, freeSolo = _f === void 0 ? false : _f, value = props.value, onInputChange = props.onInputChange, onSelect = props.onSelect, popoverProps = props.popoverProps, footer = props.footer, _g = props.listItemProps, listItemProps = _g === void 0 ? {} : _g, _h = props.listProps, listProps = _h === void 0 ? {} : _h, onUnselectedEnter = props.onUnselectedEnter, _j = props.closeOnFooterClick, closeOnFooterClick = _j === void 0 ? true : _j, _k = props.remainOpenOnSelectOrEnter, remainOpenOnSelectOrEnter = _k === void 0 ? false : _k, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter", "closeOnFooterClick", "remainOpenOnSelectOrEnter"]);
     var inputContainerRef = React.useRef(null);
     var inputRef = React.useRef(null);
     var onRef = React.useRef(null);
@@ -60,22 +60,21 @@ var Autocomplete = function (props) {
     if (freeSolo && value.length > 0 && filteredOptions.length === 0) {
         filteredOptions.push(value);
     }
+    var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     var handleChange = function (v) {
         onSelect(v);
-        var current = inputRef.current;
-        closeMenu();
-        if (!focusOnSelect)
-            return current === null || current === void 0 ? void 0 : current.focus();
+        if (!remainOpenOnSelectOrEnter)
+            closeMenu();
     };
     var closeMenu = function () {
+        var _a;
         setOn(undefined);
         setOpen(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     };
-    var openMenu = function () {
-        setOpen(true);
-    };
+    var openMenu = function () { return setOpen(true); };
     var handleKeys = function (_a) {
-        var _b, _c, _d;
+        var _b;
         var code = _a.code;
         if (code === "Escape") {
             closeMenu();
@@ -90,14 +89,11 @@ var Autocomplete = function (props) {
                 if (child && child.nodeName === "A")
                     (_b = child.click) === null || _b === void 0 ? void 0 : _b.call(child);
                 current.click();
-                if (!focusOnSelect)
-                    return (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
             }
             else if (onUnselectedEnter) {
                 onUnselectedEnter();
-                closeMenu();
-                if (!focusOnSelect)
-                    return (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+                if (!remainOpenOnSelectOrEnter)
+                    closeMenu();
             }
         }
         if (modulo > 0 && code === "ArrowDown") {
@@ -132,8 +128,7 @@ var Autocomplete = function (props) {
                                 !open && openMenu();
                             }
                             else {
-                                var current = inputRef.current;
-                                current && current.focus();
+                                focusInput();
                             }
                         }, onClick: function () {
                             !open && openMenu();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui-extended",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "More advanced UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",