Tooltip support in the Select component

app/src/pages/Select.jsx

@@ -115,7 +115,7 @@ function App() {
       label: "Group 2",
       options: [
         { label: "Option 0004", value: "4" },
-        { label: "Option 05", value: "5" },
+        { label: "Option with a very long label to test the ellipsis 0005", value: "5" },
         { label: "Option 006", value: "6" },
       ],
     },

lib/src/select/Option.tsx

@@ -13,41 +13,51 @@ const Option = ({
   isGroupedOption = false,
   isLastOption,
   isSelected,
-}: OptionProps): JSX.Element => (
-  <OptionItem
-    id={id}
-    onClick={() => {
-      onClick(option);
-    }}
-    visualFocused={visualFocused}
-    selected={isSelected}
-    role="option"
-    aria-selected={isSelected}
-  >
-    <StyledOption
+}: OptionProps): JSX.Element => {
+  const handleOnMouseEnter = (event: React.MouseEvent) => {
+    const label = event.currentTarget;
+    const optionElement = document.getElementById(id);
+
+    if (optionElement.title === "" && label.scrollWidth > label.clientWidth)
+      optionElement.title = option.label;
+  };
+
+  return (
+    <OptionItem
+      id={id}
+      onClick={() => {
+        onClick(option);
+      }}
       visualFocused={visualFocused}
       selected={isSelected}
-      last={isLastOption}
-      grouped={isGroupedOption}
-      multiple={multiple}
+      role="option"
+      aria-selected={isSelected}
     >
-      {multiple && <DxcCheckbox checked={isSelected} tabIndex={-1} />}
-      {option.icon && (
-        <OptionIcon
-          grouped={isGroupedOption}
-          multiple={multiple}
-          role={!(typeof option.icon === "string") ? "img" : undefined}
-        >
-          {typeof option.icon === "string" ? <img src={option.icon} /> : option.icon}
-        </OptionIcon>
-      )}
-      <OptionContent grouped={isGroupedOption} hasIcon={option.icon ? true : false} multiple={multiple}>
-        <OptionLabel>{option.label}</OptionLabel>
-        {!multiple && isSelected && <OptionSelectedIndicator>{selectIcons.selected}</OptionSelectedIndicator>}
-      </OptionContent>
-    </StyledOption>
-  </OptionItem>
-);
+      <StyledOption
+        visualFocused={visualFocused}
+        selected={isSelected}
+        last={isLastOption}
+        grouped={isGroupedOption}
+        multiple={multiple}
+      >
+        {multiple && <DxcCheckbox checked={isSelected} tabIndex={-1} />}
+        {option.icon && (
+          <OptionIcon
+            grouped={isGroupedOption}
+            multiple={multiple}
+            role={!(typeof option.icon === "string") ? "img" : undefined}
+          >
+            {typeof option.icon === "string" ? <img src={option.icon} /> : option.icon}
+          </OptionIcon>
+        )}
+        <OptionContent grouped={isGroupedOption} hasIcon={option.icon ? true : false} multiple={multiple}>
+          <OptionLabel onMouseEnter={handleOnMouseEnter}>{option.label}</OptionLabel>
+          {!multiple && isSelected && <OptionSelectedIndicator>{selectIcons.selected}</OptionSelectedIndicator>}
+        </OptionContent>
+      </StyledOption>
+    </OptionItem>
+  );
+};
 
 const OptionItem = styled.li<{ visualFocused: OptionProps["visualFocused"]; selected: OptionProps["isSelected"] }>`
   padding: 0 0.5rem;

lib/src/select/Select.tsx

@@ -114,6 +114,12 @@ const getSelectedOption = (
   };
 };
 
+const getSelectedOptionLabel = (placeholder: string, selectedOption: Option | Option[]) => {
+  if (Array.isArray(selectedOption))
+    return selectedOption.length === 0 ? placeholder : selectedOption.map((option) => option.label).join(", ");
+  else return selectedOption?.label ?? placeholder;
+};
+
 const notOptionalCheck = (value: string | string[], multiple: boolean, optional: boolean) =>
   !optional && (multiple ? value.length === 0 : value === "");
 
@@ -172,6 +178,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
 
     const selectRef = useRef<HTMLDivElement | null>(null);
     const selectSearchInputRef = useRef<HTMLInputElement | null>(null);
+    const selectedOptionLabelRef = useRef(null);
 
     const width = useWidth(selectRef.current);
     const colorsTheme = useTheme();
@@ -345,6 +352,14 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
       [handleSelectChangeValue, closeOptions, multiple]
     );
 
+    useEffect(() => {
+      if (selectedOptionLabelRef?.current != null) {
+        if (selectedOptionLabelRef?.current.scrollWidth > selectedOptionLabelRef?.current.clientWidth)
+          selectedOptionLabelRef.current.title = getSelectedOptionLabel(placeholder, selectedOption);
+        else selectedOptionLabelRef.current.title = "";
+      }
+    }, [placeholder, selectedOption]);
+
     return (
       <ThemeProvider theme={colorsTheme.select}>
         <SelectContainer margin={margin} size={size} ref={ref}>
@@ -428,27 +443,19 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
                       size={1}
                     />
                   )}
-                  {(!searchable || searchValue === "") &&
-                    (multiple ? (
-                      <SelectedOption
-                        disabled={disabled}
-                        atBackground={(value ?? innerValue).length === 0 || (searchable && isOpen)}
-                      >
-                        <SelectedOptionLabel>
-                          {Array.isArray(selectedOption) && selectedOption.map((option) => option.label).join(", ")}
-                        </SelectedOptionLabel>
-                        {Array.isArray(selectedOption) && selectedOption.length === 0 && placeholder}
-                      </SelectedOption>
-                    ) : (
-                      <SelectedOption
-                        disabled={disabled}
-                        atBackground={!(value ?? innerValue) || (searchable && isOpen)}
-                      >
-                        <SelectedOptionLabel>
-                          {!Array.isArray(selectedOption) ? selectedOption?.label ?? placeholder : placeholder}
-                        </SelectedOptionLabel>
-                      </SelectedOption>
-                    ))}
+                  {(!searchable || searchValue === "") && (
+                    <SelectedOption
+                      disabled={disabled}
+                      atBackground={
+                        (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) ||
+                        (searchable && isOpen)
+                      }
+                    >
+                      <SelectedOptionLabel ref={selectedOptionLabelRef}>
+                        {getSelectedOptionLabel(placeholder, selectedOption)}
+                      </SelectedOptionLabel>
+                    </SelectedOption>
+                  )}
                 </SearchableValueContainer>
                 {!disabled && error && <ErrorIcon>{selectIcons.error}</ErrorIcon>}
                 {searchable && searchValue.length > 0 && (

lib/src/text-input/TextInput.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, fireEvent, waitFor, waitForElementToBeRemoved, act } from "@testing-library/react";
+import { render, fireEvent, waitForElementToBeRemoved, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import DxcTextInput from "./TextInput.tsx";