fix(combobox): prevent optionTagProps state bloat (#1584)

Author: jzempel

packages/dropdowns.next/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 55497,
-    "minified": 40415,
-    "gzipped": 9223
+    "bundled": 55888,
+    "minified": 40554,
+    "gzipped": 9277
   },
   "index.esm.js": {
-    "bundled": 50791,
-    "minified": 35953,
-    "gzipped": 8646,
+    "bundled": 51176,
+    "minified": 36086,
+    "gzipped": 8693,
     "treeshaked": {
       "rollup": {
-        "code": 28261,
+        "code": 28382,
         "import_statements": 1064
       },
       "webpack": {
-        "code": 31151
+        "code": 31286
       }
     }
   }

packages/dropdowns.next/src/elements/combobox/Combobox.tsx

@@ -89,10 +89,12 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       const tagProps: Record<string, IOptionProps['tagProps']> = {};
       const retVal = toOptions(children, tagProps);
 
-      setOptionTagProps(value => ({ ...value, ...tagProps }));
+      if (isMultiselectable) {
+        setOptionTagProps(value => ({ ...value, ...tagProps }));
+      }
 
       return retVal;
-    }, [children]);
+    }, [children, isMultiselectable]);
     const hasFocus = useRef(false);
     const triggerRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -213,6 +215,21 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       return () => labelProps && setLabelProps(undefined);
     }, [getLabelProps, labelProps, setLabelProps]);
 
+    useEffect(() => {
+      // prevent `optionTagProps` state bloat
+      if (Array.isArray(selection)) {
+        setOptionTagProps(values =>
+          selection.reduce((value, option) => {
+            const key = toString(option);
+
+            return { ...value, [key]: values[key] };
+          }, {})
+        );
+      }
+
+      return () => setOptionTagProps({});
+    }, [selection]);
+
     const Tags = ({ selectedOptions }: { selectedOptions: IOption[] }) => {
       const [isFocused, setIsFocused] = useState(hasFocus.current);
       const value = selectedOptions.length - maxTags;