X2-10922 added dynamic tooltip for tags

src/components/Forms/ComboBox.jsx

@@ -1,9 +1,10 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React from "react";
-import Select from "react-select";
+import React, { useEffect, useRef, useState } from "react";
+import Select, { components } from "react-select";
 import CreatableSelect from "react-select/creatable";
 import "./ComboBox.css";
+import { Tooltip } from "../Tooltip";
 
 // TODO: Common parameters should be defined in stories like `options` and `defaultValue`
 export const ComboBox = ({ isCreatable = false, className, isError, ...rest }) => {
@@ -17,6 +18,7 @@ export const ComboBox = ({ isCreatable = false, className, isError, ...rest }) =
                     ? {
                           IndicatorsContainer: () => null,
                           Menu: () => null,
+                          MultiValueLabel: CustomMultiValue,
                       }
                     : null
             }
@@ -25,6 +27,28 @@ export const ComboBox = ({ isCreatable = false, className, isError, ...rest }) =
     );
 };
 
+const { MultiValueLabel } = components;
+
+const CustomMultiValue = (props) => {
+    const labelRef = useRef(null);
+    const [isTooltipDisabled, setIsTooltipDisabled] = useState(true);
+
+    useEffect(() => {
+        if (labelRef.current) {
+            const isOverflowing = labelRef.current.offsetWidth > labelRef.current.offsetParent.offsetWidth;
+            setIsTooltipDisabled(!isOverflowing);
+        }
+    }, [props.data.label]);
+
+    return (
+        <MultiValueLabel {...props}>
+            <Tooltip disabled={isTooltipDisabled} maxWidth="none" content={<span>{props.data.label}</span>}>
+                <span ref={labelRef}>{props.data.label}</span>
+            </Tooltip>
+        </MultiValueLabel>
+    );
+};
+
 ComboBox.propTypes = {
     className: PropTypes.string,
     isError: PropTypes.bool,