kendoGridToolbarFocusable works for kendo-dropdownlist but not kendo-multiselect

[Dominic]

kendo 19.3.0, angular 19.2.17. 

applying kendoGridToolbarFocusable to kendo-dropdownlist gives it the correct behavior to stay focused on click but this same behavior did not work for kendo-multiselect. it stays open so long as the click is held in but once released it closes. if the mouse is hovered over the dropdown that opens AND THEN released, the multiselect stays open and has intended behavior after selecting items.

kendoGridFocusable was also tried in this scenario and did not produce results.

<ng-template kendoGridToolbarTemplate>
<kendo-dropdownlist style="min-width:220px; margin-right:5px; margin-left:5px"
                    kendoGridToolbarFocusable
                    [data]="names"
                    (valueChange)="handleApplyAllValueChange()"
                    [defaultItem]="defaultApplyAllItem"
                    [textField]="'nm'"
                    [valueField]="'id'"
                    [(ngModel)]="applyAllItem"
                    [hidden]="isRevisedRadioButton()">
</kendo-dropdownlist>
<kendo-multiselect style="min-width:220px; max-width:220px; max-height: 140px; overflow-y: auto"
                   kendoGridToolbarFocusable
                   [data]="applyAllSecondaryList"
                   [textField]="'nm'"
                   [valueField]="'id'"
                   [disabled]="isApplyAllSecondaryDisabled()"
                   [autoClose]="false"
                   [(ngModel)]="applyAllSecondaryItem"
                   [placeholder]="'Select Secondary'"
                   [hidden]="isRevisedRadioButton()">
  <ng-template kendoMultiSelectTagTemplate let-dataItem kendoGridToolbarFocusable>
    {{ dataItem.deviationNm }}
</ng-template>
</kendo-multiselect>
</ng-template>

[Martin Bechev]

Hello Dominic,

Thank you for the provided details.

The MultiSelect component requires handling and preventing the click propagation. This solution is described in more detail here:

https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/toolbar-template#handling-components-with-internal-navigation

<kendo-multiselect style="min-width:220px; max-width:220px; max-height: 140px; overflow-y: auto"
                   kendoGridToolbarFocusable
                   (click)="$event.stopImmediatePropagation()"
                   [data]="applyAllSecondaryList"
                   [autoClose]="false">
</kendo-multiselect>

Here is an updated demo where the MultiSelect behaves correctly:

https://stackblitz.com/edit/angular-s2cxetzd?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Martin Bechev
Progress Telerik