chore: fix textbox in toolbar cannot be focused

Author: zstoyanova9

examples-standalone/coffee-warehouse/src/app/components/team/team.component.html

@@ -29,8 +29,11 @@ <h3 class="card-title">{{ customMsgService.translate('teamMembers') }}</h3>
       [columnMenu]="{ filter: true }"
       >
       <ng-template kendoGridToolbarTemplate>
-        <kendo-textbox [placeholder]="customMsgService.translate('gridSearch')" kendoTextBox (valueChange)="onFilter($event)">
-        </kendo-textbox>
+        <div #wrapper kendoGridToolbarFocusable (keydown.enter)="textbox.focus()">
+          <kendo-textbox #textbox (click)="$event.stopImmediatePropagation()" (keydown)="onKeydown($event, wrapper)"
+            [placeholder]="customMsgService.translate('gridSearch')" (valueChange)="onFilter($event)">
+          </kendo-textbox>
+        </div>
         <kendo-grid-spacer></kendo-grid-spacer>
         <button kendoGridExcelCommand type="button" [svgIcon]="excelIcon">
           {{ customMsgService.translate('exportExcel') }}

examples-standalone/coffee-warehouse/src/app/components/team/team.component.ts

@@ -64,6 +64,15 @@ export class TeamComponent implements OnInit {
         this.dataBinding ? (this.dataBinding.skip = 0) : null;
     }
 
+    public onKeydown(ev: KeyboardEvent, wrapper: HTMLDivElement): void {
+        if (ev.key === "Escape") {
+            wrapper.focus();
+        }
+        if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
+            ev.stopImmediatePropagation();
+        }
+    }
+
     public getField = (args: Employee) => {
         return `${args.fullName}_${args.jobTitle}_${args.budget}_${args.phone}_${args.address}`;
     };

examples-standalone/coffee-warehouse/src/styles/main.scss

@@ -113,7 +113,7 @@ kendo-recurrence-frequency-editor .k-edit-field {
     border-bottom-width: 2px;
 }
 
-.k-dropdownlist {
+.k-dropdownlist.k-picker {
     margin: 5px;
 }