Merge pull request #3540 from IgniteUI/ganastasov/fix-simple-combo-cascading-sample

fix(simple-combo): correct cascading sample clear buttons behavior

Author: kacheshmarova

live-editing/configs/ComboConfigGenerator.ts

@@ -10,7 +10,8 @@ import {
     IgxToastModule,
     IgxIconModule,
     IgxPrefixModule,
-    IgxSimpleComboModule
+    IgxSimpleComboModule,
+    IgxProgressBarModule
 } from 'igniteui-angular';
 import { IgxFinancialChartModule } from 'igniteui-angular-charts';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
@@ -131,9 +132,9 @@ export class ComboConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ['/src/app/data/cities15000-regions-countries.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxComboModule', 'IgxSimpleComboModule', 'SimpleComboCascadingComponent'],
+                imports: ['IgxComboModule', 'IgxSimpleComboModule', 'IgxProgressBarModule', 'SimpleComboCascadingComponent'],
                 ngDeclarations: ['SimpleComboCascadingComponent'],
-                ngImports: ['IgxComboModule', 'IgxSimpleComboModule']
+                ngImports: ['IgxComboModule', 'IgxSimpleComboModule', 'IgxProgressBarModule']
             }),
             component: 'SimpleComboCascadingComponent'
         }));

src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts

@@ -28,15 +28,16 @@ export class SimpleComboCascadingComponent implements OnInit {
             this.regionData = [];
             this.isLoadingRegions = true;
             this.loadingTime = 2000;
+        } else {
+            this.selectedRegion = undefined;
+            this.selectedCity = undefined;
         }
         setTimeout(() => {
             this.regionData = getCitiesByCountry([this.selectedCountry?.name])
             .map(c => ({name: c.region, country: c.country}))
             .filter((v, i, a) => a.findIndex(r => r.name === v.name) === i);
             this.isLoadingRegions = false;
         }, this.loadingTime)
-        this.selectedRegion = null;
-        this.selectedCity = null;
         this.citiesData = [];
         this.loadingTime = 0;
     }
@@ -47,13 +48,14 @@ export class SimpleComboCascadingComponent implements OnInit {
             this.citiesData = [];
             this.isLoadingCities = true;
             this.loadingTime = 2000;
+        } else {
+            this.selectedCity = undefined;
         }
         setTimeout(() => {
             this.citiesData = getCitiesByCountry([this.selectedCountry?.name])
             .filter(c => c.region === this.selectedRegion?.name);
             this.isLoadingCities = false;
         }, this.loadingTime)
-        this.selectedCity = null;
         this.loadingTime = 0;
     }
 }

src/app/lists/lists.module.ts

@@ -89,15 +89,15 @@ import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-c
         IgxButtonModule,
         IgxSliderModule,
         IgxComboModule,
+        IgxSimpleComboModule,
         IgxSwitchModule,
         IgxToastModule,
         IgxButtonGroupModule,
         IgxRippleModule,
         IgxCardModule,
         IgxTreeModule,
         IgxTooltipModule,
-        IgxFinancialChartModule,
-        IgxSimpleComboModule,
         IgxProgressBarModule,
+        IgxFinancialChartModule,
         IgxIconButtonDirective], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class ListsModule { }