With a kendo dropdown in a PanelBar Title the title captures all events and prevents the dropdown from working

Question

Put a kendo-combobox inside a KendoPanelBarItemTitle and the combobox fails to work

Looks like the Title is capturing all events

EXAMPLE below

            <kendo-panelbar-item [title]="'Copy from Existing Scenarios'" color="secondary" expanded="true">
                <ng-template kendoPanelBarItemTitle>
                    <span fxFlex></span>
                                <label style="margin:5px 5px 0 0">Source: </label>
                                <kendo-combobox
                                    fxFlex="100"
                                    [data]="otherScenarios | async"
                                    [valuePrimitive]="true"
                                    [textField] ="'Name'"
                                    [valueField] = "'ScenarioId'"
                                    class="mr-1"
                                    placeholder="Source"
                                    [disabled]="!copyFromExpanded"
                                    [(ngModel)]="sourceScenarioId"
                                    name="SourceScenarioId">
                                </kendo-combobox>
                </ng-template>
                <ng-template kendoPanelBarContent>
                    stuff here
                </ng-template>
            </kendo-panelbar-item>

This looks like a bug. Report it in GitHub [issue tracker](https://github.com/telerik/kendo-angular/issues). — Makla, Mar 22 '18 at 16:54
Since you are working with an it could help to set the title to **null**, and at the title to your template — AardVark71, Mar 27 '18 at 15:38

score 0 · Answer 1 · answered May 30 '18 at 16:12

In case you need to prevent the title from capturing mouse click event on some child element, create and use appClickStopPropagation directive (how to create one: https://stackoverflow.com/a/41001184/9871385).

<ng-template kendoPanelBarItemTitle>
    Click on me to toggle kendoPanelBarItem.
    <some-element appClickStopPropagation>Click on me and nothing toggles.</some-element>
</ng-template>

With a kendo dropdown in a PanelBar Title the title captures all events and prevents the dropdown from working

1 Answers1