fix: [M3-8617] - Autocomplete Popper re-rendering causing test failur…

…es (#10978) Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Sep 20, 2024 · 5b7c237 · 5b7c237
1 parent 27abb00
commit 5b7c237
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 24 deletions.
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -15,7 +15,6 @@ import {
 } from './Autocomplete.styles';
 
 import type { AutocompleteProps } from '@mui/material/Autocomplete';
-import type { SxProps } from '@mui/system';
 import type { TextFieldProps } from 'src/components/TextField';
 
 export interface EnhancedAutocompleteProps<
@@ -42,10 +41,6 @@ export interface EnhancedAutocompleteProps<
   placeholder?: string;
   /** Label for the "select all" option. */
   selectAllLabel?: string;
-  /**
-   * The prop that allows defining CSS style overrides for the PopperComponent.
-   */
-  sxPopperComponent?: SxProps;
   textFieldProps?: Partial<TextFieldProps>;
 }
 
@@ -93,7 +88,6 @@ export const Autocomplete = <
     placeholder,
     renderOption,
     selectAllLabel = '',
-    sxPopperComponent,
     textFieldProps,
     value,
     ...rest
@@ -110,9 +104,6 @@ export const Autocomplete = <
 
   return (
     <MuiAutocomplete
-      PopperComponent={(props) => {
-        return <CustomPopper {...props} sx={sxPopperComponent} />;
-      }}
       options={
         multiple && !disableSelectAll && options.length > 0
           ? optionsWithSelectAll
@@ -172,6 +163,7 @@ export const Autocomplete = <
         );
       }}
       ChipProps={{ deleteIcon: <CloseIcon /> }}
+      PopperComponent={CustomPopper}
       clearOnBlur={clearOnBlur}
       data-qa-autocomplete
       defaultValue={defaultValue}

diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
@@ -215,6 +215,15 @@ export const CreateAPITokenDrawer = (props: Props) => {
           onChange={(_, selected) =>
             form.setFieldValue('expiry', selected.value)
           }
+          slotProps={{
+            popper: {
+              sx: {
+                '&& .MuiAutocomplete-listbox': {
+                  padding: 0,
+                },
+              },
+            },
+          }}
           sx={{
             '&& .MuiAutocomplete-inputRoot': {
               paddingLeft: 1,
@@ -224,11 +233,6 @@ export const CreateAPITokenDrawer = (props: Props) => {
               padding: '0px 2px',
             },
           }}
-          sxPopperComponent={{
-            '&& .MuiAutocomplete-listbox': {
-              padding: 0,
-            },
-          }}
           disableClearable
           label="Expiry"
           options={expiryList}

diff --git a/...nager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/...nager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -270,13 +270,15 @@ export const PhoneVerification = ({
                     } ${getCountryFlag(country.code)}`,
                     value: country.code,
                   }))}
-                  sxPopperComponent={{
-                    '& .MuiPaper-root.MuiAutocomplete-paper': {
-                      border: '1px solid #3683dc',
-                      maxHeight: '285px',
-                      overflow: 'hidden',
-                      textWrap: 'nowrap',
-                      width: 'fit-content',
+                  slotProps={{
+                    paper: {
+                      sx: {
+                        border: '1px solid #3683dc',
+                        maxHeight: '285px',
+                        overflow: 'hidden',
+                        textWrap: 'nowrap',
+                        width: 'fit-content',
+                      },
                     },
                   }}
                   textFieldProps={{

diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
@@ -97,9 +97,13 @@ export const TimezoneForm = (props: Props) => {
       <StyledRootContainer>
         <Stack>
           <Autocomplete
-            sxPopperComponent={{
-              maxHeight: '285px',
-              overflow: 'hidden',
+            slotProps={{
+              popper: {
+                sx: {
+                  maxHeight: '285px',
+                  overflow: 'hidden',
+                },
+              },
             }}
             value={timezoneList.find(
               (option) => option.value === timezoneValue