projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss

@@ -23,19 +23,19 @@ $dark-fluent-scrollbar: $fluent-scrollbar;
 
 /// Generates a dark bootstrap scrollbar schema.
 /// @type {Map}
-/// @property {Map} thumb-background [color: ('grays', 50)] - The background color used for the thumb.
-/// @property {Color} track-background [color: ('grays', 50, .3)] - The background color used for the track.
+/// @property {Map} thumb-background [color: ('grays', 200, .5)] - The background color used for the thumb.
+/// @property {Color} track-background [color: ('grays', 100, .5)] - The background color used for the track.
 /// @requires {function} extend
 /// @requires $light-scrollbar
 $dark-bootstrap-scrollbar: extend(
     $bootstrap-scrollbar,
     (
         thumb-background: (
-            color: ('grays', 50)
+            color: ('grays', 200, .5)
         ),
 
         track-background: (
-            color: ('grays', 50, .3)
+            color: ('grays', 100, .5)
         ),
     )
 );

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -11,6 +11,7 @@ import { DisplayDensity } from '../../../core/displayDensity';
 import { IgxQueryBuilderComponent } from '../../../query-builder/query-builder.component';
 import { CurrentResourceStrings } from '../../../core/i18n/resources';
 import { GridResourceStringsEN } from '../../../core/i18n/grid-resources';
+import { IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
 
 /**
  * A component used for presenting advanced filtering UI for a Grid.
@@ -176,7 +177,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
      */
     public applyChanges(event?: Event) {
         this.grid.crudService.endEdit(false, event);
-        this.grid.advancedFilteringExpressionsTree = this.queryBuilder.createExpressionTreeFromGroupItem(this.queryBuilder.rootGroup);
+        this.queryBuilder.exitOperandEdit();
+        this.grid.advancedFilteringExpressionsTree = this.queryBuilder.expressionTree as IFilteringExpressionsTree;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -908,6 +908,80 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(2);
         }));
 
+        it('Should apply filters on Apply button click without prior Commit button click', fakeAsync(() => {
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+            selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Verify the filter results.
+            expect(grid.filteredData.length).toEqual(2);
+            expect(grid.rowList.length).toBe(2);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
+        }));
+
+        it('Should close the dialog on Apply button click if not all expression inputs are set', fakeAsync(() => {
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Verify the dialog is closed an no records are filtered
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            expect(grid.filteredData).toBe(null);
+
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            expect(grid.filteredData).toBe(null);
+
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+            selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            expect(grid.filteredData).toBe(null);
+        }));
+
         it('Column dropdown should contain only filterable columns.', fakeAsync(() => {
             // Open Advanced Filtering dialog.
             grid.openAdvancedFilteringDialog();

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -432,7 +432,8 @@ describe('IgxSimpleCombo', () => {
         beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
-                    IgxSimpleComboSampleComponent
+                    IgxSimpleComboSampleComponent,
+                    IgxSimpleComboEmptyComponent
                 ],
                 imports: [
                     IgxSimpleComboModule,
@@ -631,6 +632,13 @@ describe('IgxSimpleCombo', () => {
             expect(footerHTMLElement.parentNode).toEqual(dropdownList);
             expect(footerHTMLElement.textContent).toEqual('This is a footer');
         });
+        it('should initialize the component with empty data and bindings', () => {
+            fixture = TestBed.createComponent(IgxSimpleComboEmptyComponent);
+            expect(() => {
+                fixture.detectChanges();
+            }).not.toThrow();
+            expect(fixture.componentInstance.combo).toBeDefined();
+        });
     });
 
     describe('Binding tests: ', () => {
@@ -1852,6 +1860,17 @@ class IgxSimpleComboSampleComponent {
     }
 }
 
+@Component({
+    template: `<igx-simple-combo #combo [data]="data" displayKey="test" [(ngModel)]="name"></igx-simple-combo>`
+})
+export class IgxSimpleComboEmptyComponent {
+    @ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
+    public combo: IgxSimpleComboComponent;
+
+    public data: any[] = [];
+    public name!: string;
+}
+
 @Component({
     template: `<igx-simple-combo [(ngModel)]="selectedItem" [data]="items"></igx-simple-combo>`
 })

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -455,9 +455,10 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             return this.getRemoteSelection(newSelection, oldSelection);
         }
 
-        if (this.displayKey !== null && this.displayKey !== undefined
+        if (this.displayKey !== null
+            && this.displayKey !== undefined
             && newSelection.length > 0) {
-            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]?.toString() || '';
+            return this.convertKeysToItems(newSelection).filter(e => e).map(e => e[this.displayKey])[0]?.toString() || '';
         }
 
         return newSelection[0]?.toString() || '';