diff --git a/src/components/Forms/ComboBox.jsx b/src/components/Forms/ComboBox.jsx index 7f60a48b9..86096bf05 100644 --- a/src/components/Forms/ComboBox.jsx +++ b/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 ( + + {props.data.label}}> + {props.data.label} + + + ); +}; + ComboBox.propTypes = { className: PropTypes.string, isError: PropTypes.bool,