fix(pci-instances): update availability zone and micro when continent change

Signed-off-by: Lauren Olivier <[email protected]>

Author: lolottetheclash

packages/manager/apps/pci-instances/src/pages/instances/create/components/availabilityZoneSelection/AvailabilityZoneSelection.component.tsx

@@ -52,7 +52,12 @@ export const AvailabilityZoneSelection = ({
       setValue('availabilityZone', availabilityZones[0]);
   }, [availabilityZones, selectedAvailabilityZone, setValue]);
 
-  useEffect(() => setChoice('companyChoice'), [availabilityZones]);
+  useEffect(() => {
+    setChoice('companyChoice');
+    return () => {
+      setValue('availabilityZone', null);
+    };
+  }, [availabilityZones, setValue]);
 
   return (
     <section className="pt-9 pb-5">

packages/manager/apps/pci-instances/src/pages/instances/create/components/continentSelection/ContinentSelection.component.tsx

@@ -44,7 +44,7 @@ export const ContinentSelection = () => {
           field.onChange(continents.value[0]);
 
         return (
-          <FormField className="max-w-[32%]">
+          <FormField className="w-[32%]">
             <FormFieldLabel>
               {t('pci_instance_creation_select_continent_label')}
             </FormFieldLabel>

packages/manager/apps/pci-instances/src/pages/instances/create/components/localisationSelection/LocalizationSelection.component.tsx

@@ -82,9 +82,11 @@ export const LocalizationSelection = () => {
 
     if (
       !availablePreviousSelectedLocalization &&
-      localizations[0]?.macroRegion
+      localizations[0]?.macroRegion &&
+      localizations[0].microRegion
     ) {
       setValue('macroRegion', localizations[0].macroRegion);
+      setValue('microRegion', localizations[0].microRegion);
     }
   }, [localizations, selectedMacroRegion, setValue]);