diff --git a/packages/manager/.changeset/pr-12706-fixed-1755632991962.md b/packages/manager/.changeset/pr-12706-fixed-1755632991962.md new file mode 100644 index 00000000000..93a72dd8c96 --- /dev/null +++ b/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)) diff --git a/packages/manager/cypress/component/components/region-select.spec.tsx b/packages/manager/cypress/component/components/region-select.spec.tsx index 91d5200a39c..5decbd16500 100644 --- a/packages/manager/cypress/component/components/region-select.spec.tsx +++ b/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(); diff --git a/packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx b/packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx index fabb0ecc050..6089a3b2677 100644 --- a/packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx +++ b/packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx @@ -28,7 +28,7 @@ interface MaintenancePolicySelectProps { hideDefaultChip?: boolean; onChange: (policy: MaintenancePolicy) => void; textFieldProps?: Partial; - value?: string; + value?: null | string; } export const MaintenancePolicySelect = ( diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx index 016fa3471c3..b89dbe71c46 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.tsx +++ b/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< diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.types.ts b/packages/manager/src/components/RegionSelect/RegionSelect.types.ts index fc98211822a..ab38fcd89ea 100644 --- a/packages/manager/src/components/RegionSelect/RegionSelect.types.ts +++ b/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; } diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index 36760f146d0..61d9412b992 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/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 } /> ); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index 85a68949b96..18508468a8b 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx +++ b/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} /> diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index 63382255dd2..5ea7c98df7e 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/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} /> { : MAINTENANCE_POLICY_SELECT_REGION_TEXT : undefined, }} - value={field.value ?? undefined} + value={field.value ?? null} /> )} /> diff --git a/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.tsx b/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.tsx index 1b7eaa011c7..9b8289851a3 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/TwoStepRegion.tsx +++ b/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('distributed'); + React.useState('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} /> @@ -131,8 +131,8 @@ export const TwoStepRegion = (props: CombinedProps) => { { if (selectedOption?.value) { @@ -140,9 +140,11 @@ export const TwoStepRegion = (props: CombinedProps) => { } }} options={GEOGRAPHICAL_AREA_OPTIONS} - value={GEOGRAPHICAL_AREA_OPTIONS.find( - (option) => option.value === regionFilter - )} + value={ + GEOGRAPHICAL_AREA_OPTIONS.find( + (option) => option.value === regionFilter + ) ?? null + } /> { onChange={(e, region) => onChange(region)} regionFilter={regionFilter} regions={regions ?? []} - value={value} + value={value ?? null} /> diff --git a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx index d443725d612..b998ebfcfe9 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx +++ b/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 && ( { 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' && ( diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx index 8c4481074a5..8f5efa402cd 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRegions.tsx +++ b/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} /> ); }; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx index 81c8d3bfa60..bcd6d9e77ba 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/ClusterSelect.tsx @@ -59,7 +59,7 @@ export const ClusterSelect: React.FC = (props) => { placeholder="Select a Region" regions={regionOptions ?? []} required={required} - value={selectedCluster ?? undefined} + value={selectedCluster ?? null} /> ); };