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.
 - Added `aria-label` to the input fields for the pagination row label and page label to enhance screen reader accessibility.
 
 ### Changed

src/Autocomplete/Autocomplete.tsx

@@ -24,7 +24,7 @@ import { styled } from '@mui/material/styles';
 import { TYPOGRAPHY } from '../theme';
 import InputLabelAndAction, { InputLabelAndActionProps, ActionProps } from '../prerequisite_components/InputLabelAndAction/InputLabelAndAction';
 import TextField, { TextFieldProps } from '../TextField/TextField';
-import { TooltipPlacement } from '../Tooltip';
+import Tooltip, { TooltipPlacement } from '../Tooltip';
 
 /**
  * @typedef AutocompleteProps
@@ -110,6 +110,17 @@ const Autocomplete = <T, Multiple extends boolean | undefined = undefined,
   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 +155,12 @@ const Autocomplete = <T, Multiple extends boolean | undefined = undefined,
               endAdornmentAction,
               value: props.value,
             };
-            return <TextField {...textFieldArgs} />;
+            const tooltipTitle = isValueOverFlowing ? textfieldRef.current?.value || '' : '';
+            return (
+              <Tooltip title={tooltipTitle} tooltipsize="small">
+                <TextField {...textFieldArgs} inputRef={textfieldRef} />
+              </Tooltip>
+            );
           }}
         />
         <MuiFormHelperText id={helperTextId} sx={{ marginTop: nonEdit ? '0px' : '4px' }}>{helperText}</MuiFormHelperText>

src/__tests__/unit/Autocomplete/Autocomplete.test.tsx

@@ -107,15 +107,16 @@ describe('Autocomplete', () => {
   });
 
   it('Render with non edit state', () => {
-    jest.spyOn(console, 'error').mockImplementation((message) => {
+    // eslint-why we only suppress the expected error
+    // eslint-disable-next-line no-console
+    const originalConsoleError = console.error;
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
       // since the autocomplete is not editable, the input element is not found
       // this is expected and we suppress the error to avoid further confusion
-      if (message.includes('MUI: Unable to find the input element.')) {
+      if (typeof args[0] === 'string' && args[0].includes('MUI: Unable to find the input element.')) {
         return;
       }
-      // eslint-why we only suppress the expected error
-      // eslint-disable-next-line no-console
-      console.error(message);
+      originalConsoleError(...args);
     });
     const exampleMessage = 'Example message';
     render(