fix: [M3-9469] - Reset selected region when switching between Core and Distributed tabs (linode#12767)

## Description 📝
The Disk Encryption section maintains state from previously selected regions when users switch between Core and Distributed region tabs, showing inconsistent copy, tooltips, and checkbox states until a new region is selected from the current tab.

This is because Disk Encryption state is tied to selected region rather than active region tab. When the tab changes without region selection, the component doesn't reset.

> [!NOTE]
> I tried adding unit tests for this but could not figure out why the tests were failing but the UI is working as expected. Joe is also stumped.

## Changes  🔄
- Clear the region when the region tab changes

Author: hana-akamai

packages/manager/.changeset/pr-12767-fixed-1756227582572.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Reset selected region when switching between Core and Distributed tabs  ([#12767](https://github.com/linode/manager/pull/12767))

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

@@ -82,10 +82,9 @@ export const Region = React.memo(() => {
   const showTwoStepRegion =
     isGeckoLAEnabled && isDistributedRegionSupported(createType ?? 'OS');
 
-  const onChange = async (region: RegionType) => {
+  const onChange = async (region: null | RegionType) => {
     const values = getValues();
-
-    field.onChange(region.id);
+    field.onChange(region?.id);
 
     if (values.hasSignedEUAgreement) {
       // Reset the EU agreement checkbox if they checked it so they have to re-agree when they change regions
@@ -114,14 +113,14 @@ export const Region = React.memo(() => {
 
     if (
       values.metadata?.user_data &&
-      !region.capabilities.includes('Metadata')
+      !region?.capabilities.includes('Metadata')
     ) {
       // Clear metadata only if the new region does not support it
       setValue('metadata.user_data', null);
     }
 
     // Handle maintenance policy based on region capabilities
-    if (region.capabilities.includes('Maintenance Policy')) {
+    if (region?.capabilities.includes('Maintenance Policy')) {
       // If the region supports maintenance policy, set it to the default value
       // or keep the current value if it's already set
       if (!values.maintenance_policy) {
@@ -140,28 +139,28 @@ export const Region = React.memo(() => {
     // Because distributed regions do not support some features,
     // we must disable those features here. Keep in mind, we should
     // prevent the user from enabling these features in their respective components.
-    if (region.site_type === 'distributed') {
+    if (region?.site_type === 'distributed') {
       setValue('backups_enabled', false);
       setValue('private_ip', false);
     }
 
     if (isDiskEncryptionFeatureEnabled) {
-      if (region.site_type === 'distributed') {
+      if (region?.site_type === 'distributed') {
         // If a distributed region is selected, make sure we don't send disk_encryption in the payload.
         setValue('disk_encryption', undefined);
       } else {
         // Enable disk encryption by default if the region supports it
         const defaultDiskEncryptionValue =
-          region.capabilities.includes('Disk Encryption') ||
-          region.capabilities.includes('LA Disk Encryption')
+          region?.capabilities.includes('Disk Encryption') ||
+          region?.capabilities.includes('LA Disk Encryption')
             ? 'enabled'
             : undefined;
 
         setValue('disk_encryption', defaultDiskEncryptionValue);
       }
     }
 
-    if (!isLabelFieldDirty) {
+    if (!isLabelFieldDirty && region) {
       // Auto-generate the Linode label because the region is included in the generated label
       const label = await getGeneratedLinodeLabel({
         queryClient,

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

@@ -61,14 +61,16 @@ const GEOGRAPHICAL_AREA_OPTIONS: GeographicalAreaOption[] = [
 ];
 
 interface Props {
-  onChange: (region: RegionType) => void;
+  onChange: (region: null | RegionType) => void;
 }
 
 type CombinedProps = Props & Omit<Partial<RegionSelectProps>, 'onChange'>;
 
 export const TwoStepRegion = (props: CombinedProps) => {
   const { disabled, disabledRegions, errorText, onChange, value } = props;
 
+  const [tabIndex, setTabIndex] = React.useState(0);
+
   const [regionFilter, setRegionFilter] =
     React.useState<RegionFilterValue>('distributed-ALL');
 
@@ -97,7 +99,15 @@ export const TwoStepRegion = (props: CombinedProps) => {
           }
         />
       </Box>
-      <Tabs>
+      <Tabs
+        onChange={(index) => {
+          if (index !== tabIndex) {
+            setTabIndex(index);
+            // M3-9469: Reset region selection when switching between site types
+            onChange(null);
+          }
+        }}
+      >
         <TabList>
           <Tab>Core</Tab>
           <Tab>Distributed</Tab>