carbon-react 146.4.0 → 146.4.1

package/esm/components/select/__internal__/utils/are-objects-equal.d.ts

@@ -0,0 +1 @@
+export default function areObjectsEqual(obj1: Record<string, unknown>, obj2: Record<string, unknown>): boolean;

package/esm/components/select/__internal__/utils/are-objects-equal.js

@@ -0,0 +1,20 @@
+export default function areObjectsEqual(obj1, obj2) {
+  // Check if both arguments are objects
+  if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
+    return false;
+  }
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // If the number of keys is different, objects aren't equal
+  if (keys1.length !== keys2.length) {
+    return false;
+  } // Compare keys and values
+  for (const key of keys1) {
+    // Check if obj2 has the key and values are strictly equal
+    if (!Object.prototype.hasOwnProperty.call(obj2, key) || obj1[key] !== obj2[key]) {
+      return false;
+    }
+  }
+  return true;
+}

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -9,6 +9,7 @@ import withFilter from "../__internal__/utils/with-filter.hoc";
 import StyledSelect from "../select.style";
 import SelectList from "../__internal__/select-list/select-list.component";
 import isExpectedOption from "../__internal__/utils/is-expected-option";
+import areObjectsEqual from "../__internal__/utils/are-objects-equal";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
@@ -69,6 +70,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const [isOpen, setOpen] = useState(false);
   const [textValue, setTextValue] = useState("");
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
+  const receivedValue = useRef(value);
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
   const inputId = useRef(id || guid());
@@ -234,15 +236,27 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
     !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? invariant(false, onListActionMissingMessage) : invariant(false) : void 0;
   }, [listActionButton, onListAction]);
+  const isFirstRender = useRef(true);
   useEffect(() => {
+    // when we render for the first time, we run setMatchingText to populate the input with the correct text
+    if (isFirstRender.current) {
+      setMatchingText(selectedValue);
+    }
     if (isControlled.current) {
-      setMatchingText(value);
+      // when value is an object we should only run setMatchingText if the object changes between renders
+      if (typeof value === "object" && typeof receivedValue.current === "object") {
+        if (!areObjectsEqual(value, receivedValue.current)) {
+          setMatchingText(value);
+          receivedValue.current = value;
+        }
+      } else {
+        setMatchingText(value);
+      }
     }
     // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, children]);
   const onFilterChange = useStableCallback(onFilterChangeProp);
-  const isFirstRender = useRef(true);
   useEffect(() => {
     if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);

package/lib/components/select/__internal__/utils/are-objects-equal.d.ts

@@ -0,0 +1 @@
+export default function areObjectsEqual(obj1: Record<string, unknown>, obj2: Record<string, unknown>): boolean;

package/lib/components/select/__internal__/utils/are-objects-equal.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = areObjectsEqual;
+function areObjectsEqual(obj1, obj2) {
+  // Check if both arguments are objects
+  if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null) {
+    return false;
+  }
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // If the number of keys is different, objects aren't equal
+  if (keys1.length !== keys2.length) {
+    return false;
+  } // Compare keys and values
+  for (const key of keys1) {
+    // Check if obj2 has the key and values are strictly equal
+    if (!Object.prototype.hasOwnProperty.call(obj2, key) || obj1[key] !== obj2[key]) {
+      return false;
+    }
+  }
+  return true;
+}

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -14,6 +14,7 @@ var _withFilter = _interopRequireDefault(require("../__internal__/utils/with-fil
 var _select = _interopRequireDefault(require("../select.style"));
 var _selectList = _interopRequireDefault(require("../__internal__/select-list/select-list.component"));
 var _isExpectedOption = _interopRequireDefault(require("../__internal__/utils/is-expected-option"));
+var _areObjectsEqual = _interopRequireDefault(require("../__internal__/utils/are-objects-equal"));
 var _isNavigationKey = _interopRequireDefault(require("../__internal__/utils/is-navigation-key"));
 var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
@@ -78,6 +79,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   const [isOpen, setOpen] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
+  const receivedValue = (0, _react.useRef)(value);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const inputId = (0, _react.useRef)(id || (0, _guid.default)());
@@ -243,15 +245,27 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
     !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onListActionMissingMessage) : (0, _invariant.default)(false) : void 0;
   }, [listActionButton, onListAction]);
+  const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
+    // when we render for the first time, we run setMatchingText to populate the input with the correct text
+    if (isFirstRender.current) {
+      setMatchingText(selectedValue);
+    }
     if (isControlled.current) {
-      setMatchingText(value);
+      // when value is an object we should only run setMatchingText if the object changes between renders
+      if (typeof value === "object" && typeof receivedValue.current === "object") {
+        if (!(0, _areObjectsEqual.default)(value, receivedValue.current)) {
+          setMatchingText(value);
+          receivedValue.current = value;
+        }
+      } else {
+        setMatchingText(value);
+      }
     }
     // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, children]);
   const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
-  const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
     if (onFilterChange && !isFirstRender.current) {
       onFilterChange(filterText);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "146.4.0",
+  "version": "146.4.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",