Tooltip support in the Select component

lib/src/select/Option.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import styled from "styled-components";
 import { OptionProps } from "../select/types";
 import DxcCheckbox from "../checkbox/Checkbox";
@@ -13,41 +13,49 @@ 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 labelRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (labelRef.current.scrollWidth > labelRef.current.clientWidth) document.getElementById(id).title = option.label;
+  }, [option]);
+
+  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 ref={labelRef}>{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

@@ -172,6 +172,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 +346,17 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>(
       [handleSelectChangeValue, closeOptions, multiple]
     );
 
+    const getSelectedOptionLabel = useCallback(() => {
+      if (Array.isArray(selectedOption))
+        return selectedOption.length === 0 ? placeholder : selectedOption.map((option) => option.label).join(", ");
+      else return selectedOption?.label ?? placeholder;
+    }, [placeholder, selectedOption]);
+
+    useEffect(() => {
+      if (selectedOptionLabelRef?.current?.scrollWidth > selectedOptionLabelRef?.current?.clientWidth)
+        selectedOptionLabelRef.current.title = getSelectedOptionLabel();
+    }, [getSelectedOptionLabel]);
+
     return (
       <ThemeProvider theme={colorsTheme.select}>
         <SelectContainer margin={margin} size={size} ref={ref}>
@@ -428,27 +440,17 @@ 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()}</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";