[MPDX-7837] Adds close adornment to base search text field.

src/components/common/SearchBox/SearchBox.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import theme from '../../../theme';
 import { SearchBox } from './SearchBox';
@@ -29,7 +29,7 @@ it('triggers onChange', async () => {
   const inputText = 'name';
   const placeholderText = 'placeholder';
 
-  const { getByRole } = render(
+  const { getByRole, getByTestId } = render(
     <ThemeProvider theme={theme}>
       <SearchBox
         showContactSearchIcon={false}
@@ -41,12 +41,11 @@ it('triggers onChange', async () => {
   );
 
   const textbox = getByRole('textbox');
-
   expect(textbox).toHaveValue('');
-
   userEvent.type(textbox, inputText);
+  await waitFor(() => expect(onChange).toHaveBeenCalledWith(inputText));
 
-  await new Promise((resolve) => setTimeout(resolve, 300));
-
-  expect(onChange).toHaveBeenCalledWith(inputText);
+  userEvent.click(getByTestId('SearchInputCloseButton'));
+  expect(textbox).toHaveValue('');
+  expect(onChange).toHaveBeenCalledWith('');
 });

src/components/common/SearchBox/SearchBox.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { mdiAccountSearch } from '@mdi/js';
 import Icon from '@mdi/react';
+import Close from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
-import { InputAdornment, TextField } from '@mui/material';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
@@ -41,6 +42,7 @@ export const SearchBox: React.FC<SearchBoxProps> = ({
     <SearchInput
       size="small"
       variant="outlined"
+      sx={{ width: { sm: '27ch', md: '31ch' } }}
       onChange={(e) => handleOnChange(e.target.value)}
       placeholder={placeholder ?? t('Search')}
       value={currentSearchTerm}
@@ -54,6 +56,25 @@ export const SearchBox: React.FC<SearchBoxProps> = ({
             )}
           </InputAdornment>
         ),
+        endAdornment: (
+          <InputAdornment position="end">
+            {currentSearchTerm && (
+              <IconButton
+                onClick={() => handleOnChange('')}
+                data-testid="SearchInputCloseButton"
+              >
+                <Close
+                  titleAccess={t('Close')}
+                  sx={{
+                    width: 14,
+                    height: 14,
+                    color: 'text.primary',
+                  }}
+                />
+              </IconButton>
+            )}
+          </InputAdornment>
+        ),
       }}
     />
   );