diff --git a/CHANGELOG.md b/CHANGELOG.md index f810f14..2733b54 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx index a72de29..eefa670 100644 --- a/src/Autocomplete/Autocomplete.tsx +++ b/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 = (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 ( @@ -144,7 +155,12 @@ const Autocomplete = ; + const tooltipTitle = isValueOverFlowing ? textfieldRef.current?.value || '' : ''; + return ( + + + + ); }} /> {helperText} diff --git a/src/__tests__/unit/Autocomplete/Autocomplete.test.tsx b/src/__tests__/unit/Autocomplete/Autocomplete.test.tsx index a457aa6..fa1520a 100644 --- a/src/__tests__/unit/Autocomplete/Autocomplete.test.tsx +++ b/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(