refactor(sorting samples): prevent from input typing

Author: katherinedragieva

src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html

@@ -9,13 +9,14 @@
                 Clear Grouped columns
             </button>
             <igx-grid-toolbar-actions>
-                <igx-simple-combo #comboItem class="sorting-values"
+                <igx-simple-combo #comboItem
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
                     [(ngModel)]="sortingOptions"
-                    (selectionChanging)="handleDropDownSelection($event)">
-                    <ng-template igxComboClearIcon>
-                        <igx-icon></igx-icon>
+                    (keydown)="handleSearchResults($event)">
+                    <ng-template igxComboClearIcon></ng-template>
+                    <ng-template igxComboItem let-item>
+                        <div>{{ item.mode | uppercase }}</div>
                     </ng-template>
                 </igx-simple-combo>
             </igx-grid-toolbar-actions>

src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss

@@ -10,8 +10,3 @@
         justify-content: flex-start;
     }
 }
-
-.sorting-values ::ng-deep .igx-input-group__input,
-::ng-deep .igx-drop-down__item .igx-drop-down__inner {
-    text-transform: uppercase;
-}

src/app/grid/grid-sorting-sample/grid-sorting-sample.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { DefaultSortingStrategy, IgxGridComponent, ISimpleComboSelectionChangingEventArgs, ISortingOptions, SortingDirection } from 'igniteui-angular';
+import { DefaultSortingStrategy, IgxGridComponent, ISortingOptions, SortingDirection } from 'igniteui-angular';
 import { DATA } from '../../data/localData';
 
 @Component({
@@ -38,7 +38,7 @@ export class SortingSampleComponent implements OnInit {
         return new Intl.DateTimeFormat('en-US').format(val);
     }
 
-    handleDropDownSelection(event: ISimpleComboSelectionChangingEventArgs) {
-        this.sortingOptions = event.newSelection;
+    handleSearchResults(event: KeyboardEvent) {
+        event.preventDefault();
     }
 }

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.html

@@ -10,13 +10,14 @@
                 Clear Grouped columns
             </button>
             <igx-grid-toolbar-actions>
-                <igx-simple-combo #comboItem class="sorting-values"
+                <igx-simple-combo #comboItem
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
                     [(ngModel)]="sortingOptions"
-                    (selectionChanging)="handleDropDownSelection($event)">
-                    <ng-template igxComboClearIcon>
-                        <igx-icon></igx-icon>
+                    (keydown)="handleSearchResults($event)">
+                    <ng-template igxComboClearIcon></ng-template>
+                    <ng-template igxComboItem let-item>
+                        <div>{{ item.mode | uppercase }}</div>
                     </ng-template>
                 </igx-simple-combo>
             </igx-grid-toolbar-actions>

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.scss

@@ -10,8 +10,3 @@
         justify-content: flex-start;
     }
 }
-
-.sorting-values ::ng-deep .igx-input-group__input,
-::ng-deep .igx-drop-down__item .igx-drop-down__inner {
-    text-transform: uppercase;
-}

src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { DefaultSortingStrategy, IgxTreeGridComponent, ISimpleComboSelectionChangingEventArgs, ISortingOptions, SortingDirection } from 'igniteui-angular';
+import { DefaultSortingStrategy, IgxTreeGridComponent, ISortingOptions, SortingDirection } from 'igniteui-angular';
 import { FOODS_DATA } from '../data/foods';
 
 @Component({
@@ -51,7 +51,7 @@ export class TreeGridSortingSampleComponent implements OnInit {
       this.contextmenu = false;
     }
 
-    handleDropDownSelection(event: ISimpleComboSelectionChangingEventArgs) {
-        this.sortingOptions = event.newSelection;
+    handleSearchResults(event: KeyboardEvent) {
+        event.preventDefault();
     }
 }