@homebound/beam 2.343.1 → 2.343.2

package/dist/inputs/internal/ComboBoxBase.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.disabledOptionToKeyedTuple = exports.unsetOption = exports.initializeOptions = exports.ComboBoxBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -14,6 +17,7 @@ const ListBox_1 = require("./ListBox");
 const Value_1 = require("../Value");
 const utils_1 = require("../utils");
 const use_debounce_1 = require("use-debounce");
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 /**
  * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
  *
@@ -48,8 +52,17 @@ function ComboBoxBase(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     Array.isArray(propOptions) ? [propOptions, unsetLabel] : [propOptions.current, propOptions.options, unsetLabel]);
     const values = (0, react_1.useMemo)(() => propValues !== null && propValues !== void 0 ? propValues : [], [propValues]);
+    const selectedOptionsRef = (0, react_1.useRef)(options.filter((o) => values.includes(getOptionValue(o))));
     const selectedOptions = (0, react_1.useMemo)(() => {
-        return options.filter((o) => values.includes(getOptionValue(o)));
+        // `selectedOptions` should only ever update if the `values` prop actually change.
+        // Assuming `values` is a state variable, then it should hold its identity until it _really_ changes.
+        // Though, it is possible that the `options` prop has changed, which is a dependency on this `useMemo`.
+        // That could trigger an unnecessary new reference for `selectedOptions`, and cause additional renders or unexpected state changes.
+        // We should avoid updating `selectedOptions` unless `values` has actually changed.
+        if (!(0, fast_deep_equal_1.default)(values.sort(), selectedOptionsRef.current.map(getOptionValue).sort())) {
+            selectedOptionsRef.current = options.filter((o) => values.includes(getOptionValue(o)));
+        }
+        return selectedOptionsRef.current;
     }, [options, values, getOptionValue]);
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
@@ -170,8 +183,6 @@ function ComboBoxBase(props) {
     const [debouncedSearch] = (0, use_debounce_1.useDebounce)(searchValue, 300);
     // Reset inputValue when closed or selected changes
     (0, react_1.useEffect)(() => {
-        if (debouncedSearch)
-            return;
         if (state.isOpen && multiselect) {
             // While the multiselect is open, let the user keep typing
             setFieldState((prevState) => ({
@@ -187,7 +198,7 @@ function ComboBoxBase(props) {
                 inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
             }));
         }
-    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly, debouncedSearch]);
+    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly]);
     // Call on search callback when the user types in the input field
     (0, react_1.useEffect)(() => {
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(debouncedSearch !== null && debouncedSearch !== void 0 ? debouncedSearch : "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.343.1",
+  "version": "2.343.2",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",