fix:[M3-10481]- Fix Autocomplete undefined value issues - Part 1

packages/manager/.changeset/pr-12706-fixed-1755632991962.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Replace undefined with null in Autocomplete values to fix MUI errors ([#12706](https://github.com/linode/manager/pull/12706))

packages/manager/cypress/component/components/region-select.spec.tsx

@@ -29,7 +29,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={() => {}}
             regions={[region]}
-            value={undefined}
+            value={null}
           />
         );
 
@@ -58,7 +58,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={() => {}}
             regions={[region]}
-            value={undefined}
+            value={null}
           />
         );
 
@@ -88,7 +88,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={() => {}}
             regions={[region]}
-            value={undefined}
+            value={null}
           />
         );
 
@@ -118,7 +118,7 @@ componentTests('RegionSelect', (mount) => {
               isGeckoLAEnabled={false}
               onChange={() => {}}
               regions={[region]}
-              value={undefined}
+              value={null}
             />
           </>
         );
@@ -152,7 +152,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={() => {}}
             regions={regions}
-            value={undefined}
+            value={null}
           />
         );
 
@@ -271,7 +271,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={() => {}}
             regions={regions}
-            value={undefined}
+            value={null}
           />
         );
 
@@ -289,7 +289,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={spyFn}
             regions={regions}
-            value={undefined}
+            value={null}
           />
         );
 
@@ -359,7 +359,7 @@ componentTests('RegionSelect', (mount) => {
           isGeckoLAEnabled={false}
           onChange={() => {}}
           regions={regions}
-          value={undefined}
+          value={null}
         />,
         {
           dcGetWell: true,
@@ -394,7 +394,7 @@ componentTests('RegionSelect', (mount) => {
           isGeckoLAEnabled={false}
           onChange={() => {}}
           regions={regions}
-          value={undefined}
+          value={null}
         />
       );
 
@@ -424,7 +424,7 @@ componentTests('RegionSelect', (mount) => {
           isGeckoLAEnabled={false}
           onChange={() => {}}
           regions={regions}
-          value={undefined}
+          value={null}
         />
       );
 
@@ -455,7 +455,7 @@ componentTests('RegionSelect', (mount) => {
             isGeckoLAEnabled={false}
             onChange={() => {}}
             regions={regions}
-            value={undefined}
+            value={null}
           />
         );
         checkComponentA11y();

packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx

@@ -28,7 +28,7 @@ interface MaintenancePolicySelectProps {
   hideDefaultChip?: boolean;
   onChange: (policy: MaintenancePolicy) => void;
   textFieldProps?: Partial<TextFieldProps>;
-  value?: string;
+  value?: null | string;
 }
 
 export const MaintenancePolicySelect = (

packages/manager/src/components/RegionSelect/RegionSelect.tsx

@@ -68,7 +68,7 @@ export const RegionSelect = <
   });
 
   const selectedRegion = value
-    ? regionOptions.find((r) => r.id === value)
+    ? (regionOptions.find((r) => r.id === value) ?? null)
     : null;
 
   const disabledRegions = regionOptions.reduce<

packages/manager/src/components/RegionSelect/RegionSelect.types.ts

@@ -62,7 +62,7 @@ export interface RegionSelectProps<
   /**
    * The ID of the selected region.
    */
-  value: string | undefined;
+  value: null | string;
   width?: number;
 }
 

packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx

@@ -167,7 +167,9 @@ export const CloudPulseRegionSelect = React.memo(
         placeholder={placeholder ?? 'Select a Region'}
         regions={supportedRegionsFromResources}
         value={
-          supportedRegionsFromResources?.length ? selectedRegion : undefined
+          supportedRegionsFromResources?.length
+            ? (selectedRegion ?? null)
+            : null
         }
       />
     );

packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx

@@ -222,7 +222,7 @@ export const DatabaseBackups = () => {
                   option.value === value.value
                 }
                 label=""
-                onChange={(_, newTime) => setSelectedTime(newTime)}
+                onChange={(_, newTime) => setSelectedTime(newTime ?? null)}
                 options={TIME_OPTIONS}
                 placeholder="Choose a time"
                 renderOption={(props, option) => {
@@ -238,7 +238,7 @@ export const DatabaseBackups = () => {
                     'data-qa-time-select': true,
                   },
                 }}
-                value={selectedTime}
+                value={selectedTime ?? null}
               />
             </FormControl>
           </GridLegacy>

packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx

@@ -527,7 +527,7 @@ export const CreateCluster = () => {
                       ? 'Only regions that support LKE Enterprise clusters are listed.'
                       : undefined
                   }
-                  value={selectedRegion?.id}
+                  value={selectedRegion?.id || null}
                 />
               </Stack>
               <StyledDocsLinkContainer

packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx

@@ -88,7 +88,7 @@ export const MaintenancePolicy = () => {
                   : MAINTENANCE_POLICY_SELECT_REGION_TEXT
                 : undefined,
             }}
-            value={field.value ?? undefined}
+            value={field.value ?? null}
           />
         )}
       />

packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.tsx

@@ -70,7 +70,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
   const { disabled, disabledRegions, errorText, onChange, value } = props;
 
   const [regionFilter, setRegionFilter] =
-    React.useState<RegionFilterValue>('distributed');
+    React.useState<RegionFilterValue>('distributed-ALL');
 
   const { data: regions } = useRegionsQuery();
   const createType = useGetLinodeCreateType();
@@ -120,7 +120,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
               onChange={(e, region) => onChange(region)}
               regionFilter="core"
               regions={regions ?? []}
-              value={value}
+              value={value ?? null}
             />
           </SafeTabPanel>
           <SafeTabPanel index={1}>
@@ -131,18 +131,20 @@ export const TwoStepRegion = (props: CombinedProps) => {
               </Typography>
             </Box>
             <Autocomplete
+              clearIcon={null}
               defaultValue={GEOGRAPHICAL_AREA_OPTIONS[0]}
-              disableClearable
               label="Geographical Area"
               onChange={(_, selectedOption) => {
                 if (selectedOption?.value) {
                   setRegionFilter(selectedOption.value);
                 }
               }}
               options={GEOGRAPHICAL_AREA_OPTIONS}
-              value={GEOGRAPHICAL_AREA_OPTIONS.find(
-                (option) => option.value === regionFilter
-              )}
+              value={
+                GEOGRAPHICAL_AREA_OPTIONS.find(
+                  (option) => option.value === regionFilter
+                ) ?? null
+              }
             />
             <RegionSelect
               currentCapability="Linodes"
@@ -154,7 +156,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
               onChange={(e, region) => onChange(region)}
               regionFilter={regionFilter}
               regions={regions ?? []}
-              value={value}
+              value={value ?? null}
             />
           </SafeTabPanel>
         </TabPanels>

packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx

@@ -203,7 +203,7 @@ export const ConfigureForm = React.memo((props: Props) => {
             textFieldProps={{
               helperText,
             }}
-            value={selectedRegion}
+            value={selectedRegion ?? null}
           />
           {shouldDisplayPriceComparison && selectedRegion && (
             <MigrationPricing

packages/manager/src/features/Linodes/PowerActionsDialogOrDrawer.tsx

@@ -174,9 +174,10 @@ export const PowerActionsDialog = (props: Props) => {
           loading={configsLoading}
           onChange={(_, option) => setSelectConfigID(option?.value ?? null)}
           options={configOptions}
-          value={configOptions.find(
-            (option) => option.value === selectedConfigID
-          )}
+          value={
+            configOptions.find((option) => option.value === selectedConfigID) ??
+            null
+          }
         />
       )}
       {props.action === 'Power Off' && (

packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx

@@ -50,7 +50,7 @@ export const BucketRegions = (props: Props) => {
       placeholder="Select a Region"
       regions={availableStorageRegions ?? []}
       required={required}
-      value={selectedRegion}
+      value={selectedRegion ?? null}
     />
   );
 };

packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx

@@ -59,7 +59,7 @@ export const ClusterSelect: React.FC<Props> = (props) => {
       placeholder="Select a Region"
       regions={regionOptions ?? []}
       required={required}
-      value={selectedCluster ?? undefined}
+      value={selectedCluster ?? null}
     />
   );
 };