Customize Angular Kendo 'multi-select list' with a separate search bar

[n/a]

I am using kendo multi-select control on my angular application. My use case is expecting a search functionality inside the dropdown. Instead of searching over the field, the dropdown should show a search text box to search the items inside the dropdown list.  Like in the kendo-dropdown-filtering, but it should be a muti-select ( see the below image.)



I need to filter the multi-select items while typing in the search textbox in the dropdown. This search text box is added by me. 

unfortunately, I am not able to achieve this customization.  Not able to clickable or type anything on the search textbox.

            <kendo-multiselect
              aria-label="Racial Identities"
              [checkboxes]="{ checkOnClick: true, enabled: true }"
              formControlName="RaceAndEthnicity"
              #multiselect
              [autoClose]="false"
              [fillMode]="formUiStyle.dropDownFillMode"
              [data]="raceAndEthnicityData"
              [textField]="'lovDesc'"
              [valueField]="'lovCode'"
              (valueChange)="RaceAndEthnicityhange($event)"
              [popupSettings]="{
                popupClass: popupClassMultiSelect,
                animate: true
              }"
            >
              <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
                <div class="input-search">
                  <span
                    class="material-icons"
                    aria-label="search racial identity"
                    aria-hidden="true"
                    >search</span
                  >
                  <kendo-floatinglabel text="Search">
                    <!-- Added by me to filter the items on a search textbox. -->
                    <kendo-textbox
                      aria-label="search racial identity"
                      [fillMode]="formUiStyle.inputFillMode"
                      placeholder="Search"
                    >
                    </kendo-textbox>
                  </kendo-floatinglabel>
                </div>
              </ng-template>
              <ng-template kendoMultiSelectItemTemplate let-dataItem>
                <span class="app-checkboxwidtext-wrapper">
                  <input
                    type="checkbox"
                    kendoCheckBox
                    attr.aria-labelledby="{{dataItem.lovDesc}}" 
                    [id]="dataItem.lovDesc"
                  />
                  <label class="k-checkbox-label" [for]="dataItem.lovDesc">{{
                    dataItem.lovDesc
                  }}</label>
                </span>
              </ng-template>
            </kendo-multiselect>