tooltip for autocomplete textfield

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Corrected the focus styling of `preview icon` in the `Tile` component and `zoom buttons` in the `Preview` component to meet the required contrast ratio
 - Corrected the focus styling of endActionButtons in `DataGrid` component.
 - Added `role="alert"` to the snackbar message text for improved screen reader accessibility.
+- Added tooltip to the `Autocomplete` textfield for the truncated values.
 
 ### Changed
 - Added keyboard accessibility to the header in `DataGrid` component

src/Autocomplete/Autocomplete.tsx

@@ -16,6 +16,7 @@
 import React from 'react';
 import MuiAutocomplete, { AutocompleteProps as MuiAutocompleteProps } from '@mui/material/Autocomplete';
 import { Components, Theme } from '@mui/material';
+import Tooltip from '../Tooltip/Tooltip';
 import CaretDownIcon from '@hcl-software/enchanted-icons/dist/carbon/es/caret--down';
 import ClearIcon from '@hcl-software/enchanted-icons/dist/carbon/es/close';
 import MuiFormHelperText from '@mui/material/FormHelperText';
@@ -110,6 +111,17 @@
   const helperTextId = props.helperText && props.id ? `${props.id}-helper-text` : undefined;
   const muiFormControlProps = getMuiFormControlProps(props);
   const inputLabelAndActionProps = getInputLabelAndActionProps(props, isFocus);
+  const textfieldRef = React.useRef<HTMLInputElement>(null);
+  const [isValueOverFlowing, setIsValueOverFlowing] = React.useState(false);
+
+  React.useEffect(() => {
+    const textFieldElement = textfieldRef.current;
+    if (textFieldElement && textFieldElement.scrollWidth > textFieldElement.clientWidth) {
+      setIsValueOverFlowing(true);
+    } else {
+      setIsValueOverFlowing(false);
+    }
+  }, [props.value]);
 
   return (
     <AutoCompleteContainer className="autocomplete-container">
@@ -144,7 +156,12 @@
               endAdornmentAction,
               value: props.value,
             };
-            return <TextField {...textFieldArgs} />;
+            const tooltipTitle = isValueOverFlowing? textfieldRef.current?.value || '' : '';
+            return (
+              <Tooltip title={tooltipTitle}>
+                <TextField {...textFieldArgs} inputRef={textfieldRef} />
+              </Tooltip>
+            );
           }}
         />
         <MuiFormHelperText id={helperTextId} sx={{ marginTop: nonEdit ? '0px' : '4px' }}>{helperText}</MuiFormHelperText>