为什么在Kendo Angular Charts中不触发左键单击？

Question

I have simple bar chart on my home page. It is displayed correctly, but I cannot catch left click event (the right click works fine).

This is a code from my template:

<kendo-chart *ngIf="(dataExists | async)"
             [legend]="chartConfig.legend"
             [axisDefaults]="chartConfig.axisDefaults"
             [chartArea]="chartConfig.chartArea"
             [plotArea]="chartConfig.plotArea"
             [seriesDefaults]="chartConfig.seriesDefaults"
             [valueAxis]="chartConfig.valueAxis"
             [transitions]="chartConfig.transitions"
             (seriesClick)="onSeriesClick($event)">
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of (data | async)"
                                 [data]="[item]"
                                 [field]="dataField"
                                 [name]="item.Name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

I use seriesClick for catching my click events.

This is a code from a part of a component:

public onSeriesClick(e: SeriesClickEvent): void {
        if (this.isLeftClick(e)) {
            this.router.navigateByUrl('/videos');
        }
    }

    private isLeftClick(e: SeriesClickEvent) {
        return e.originalEvent.event && e.originalEvent.event.button === 0;
    }

The left click event is not caught by onSeriesClick function, but the right click is caught. The problem is that I do not see any stopPropagation in the call stack. I was wondering if you could help me to understand and solve this issue.

This is screenshots of my call stack from the chrome developer panel.

main.js belongs to progress/kendo-charts/dist/npm

Chart config

import { ChartConfigInterface } from '../../shared/components/charts/interfaces/chart-config-interface';

export const ChartConfig: ChartConfigInterface = {
    legend: {
        visible: false
    },
    axisDefaults: {
        majorGridLines: false
    },
    seriesDefaults: {
        type: 'column',
        labels: {
            position: 'insideBase',
            margin: -24, 
            format: 'n',
            visible: true,
            content: e => e.series.name
        }
    },
    valueAxis: {
        labels: {
            step: 5,
        },
        majorUnit: 1,
        type: 'numeric'
    },
    chartArea: {
        height: 280
    },
    plotArea: {
        margin: 10,
        padding: 0
    },
    transitions: false
};

package.json

"@progress/kendo-angular-charts": "1.2.2",
"@progress/kendo-angular-dialog": "0.20.0",
"@progress/kendo-angular-intl": "1.2.2",
"@progress/kendo-angular-l10n": "0.3.0",
"@progress/kendo-angular-popup": "0.17.0",
"@progress/kendo-drawing": "1.1.2",
"@progress/kendo-theme-default": "2.33.5"

Also I get few errors when I load my home page.

 Unhandled Promise rejection: Cannot read property 'observers' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'observers' of undefined
        at ChartComponent.requiresHandlers (chart.component.js:291)
        at ChartInstanceObserver.requiresHandlers (main.js:461)
        at Chart.requiresHandlers (main.js:21076)
        at Chart._shouldAttachMouseMove (main.js:21873)
        at Chart._attachEvents (main.js:21107)
        at main.js:20591
        at ZoneDelegate.invoke (vendors.js?78cf9b57189af0bd597d:14920)
        at Zone.run (vendors.js?78cf9b57189af0bd597d:14680)
        at vendors.js?78cf9b57189af0bd597d:15315
        at ZoneDelegate.invokeTask (vendors.js?78cf9b57189af0bd597d:14953)
        at Zone.runTask (vendors.js?78cf9b57189af0bd597d:14720)
        at drainMicroTaskQueue (vendors.js?78cf9b57189af0bd597d:15148) 

TypeError: Cannot read property 'observers' of undefined
    at ChartComponent.requiresHandlers (http://localhost/app.js?78cf9b57189af0bd597d:87177:35)
    at ChartInstanceObserver.requiresHandlers (http://localhost/app.js?78cf9b57189af0bd597d:89711:31)
    at Chart.requiresHandlers (http://localhost/app.js?78cf9b57189af0bd597d:110326:33)
    at Chart._shouldAttachMouseMove (http://localhost/app.js?78cf9b57189af0bd597d:111123:102)
    at Chart._attachEvents (http://localhost/app.js?78cf9b57189af0bd597d:110357:19)
    at http://localhost/app.js?78cf9b57189af0bd597d:109841:25
    at ZoneDelegate.invoke (http://localhost/vendors.js?78cf9b57189af0bd597d:14920:27)
    at Zone.run (http://localhost/vendors.js?78cf9b57189af0bd597d:14680:44)
    at http://localhost/vendors.js?78cf9b57189af0bd597d:15315:58
    at ZoneDelegate.invokeTask (http://localhost/vendors.js?78cf9b57189af0bd597d:14953:32)
    at Zone.runTask (http://localhost/vendors.js?78cf9b57189af0bd597d:14720:48)
    at drainMicroTaskQueue (http://localhost/vendors.js?78cf9b57189af0bd597d:15148:36)
consoleError @ vendors.js?78cf9b57189af0bd597d:15124
handleUnhandledRejection @ vendors.js?78cf9b57189af0bd597d:15129
_loop_1 @ vendors.js?78cf9b57189af0bd597d:15164
drainMicroTaskQueue @ vendors.js?78cf9b57189af0bd597d:15168
Promise.then (async)
scheduleQueueDrain @ vendors.js?78cf9b57189af0bd597d:15107
scheduleMicroTask @ vendors.js?78cf9b57189af0bd597d:15115
ZoneDelegate.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14942
Zone.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14764
Zone.scheduleMicroTask @ vendors.js?78cf9b57189af0bd597d:14784
scheduleResolveOrReject @ vendors.js?78cf9b57189af0bd597d:15313
resolvePromise @ vendors.js?78cf9b57189af0bd597d:15262
(anonymous) @ vendors.js?78cf9b57189af0bd597d:15193
Promise.then (async)
(anonymous) @ vendors.js?78cf9b57189af0bd597d:15428
ZoneAwarePromise @ vendors.js?78cf9b57189af0bd597d:15331
Ctor.then @ vendors.js?78cf9b57189af0bd597d:15427
ZoneAwarePromise.all @ vendors.js?78cf9b57189af0bd597d:15382
loadFonts @ main.js:555
preloadFonts @ main.js:565
Chart @ main.js:20587
ChartComponent.createInstance @ chart.component.js:116
(anonymous) @ chart.component.js:234
ZoneDelegate.invoke @ vendors.js?78cf9b57189af0bd597d:14920
Zone.run @ vendors.js?78cf9b57189af0bd597d:14680
NgZone.runOutsideAngular @ core.umd.js:4023
ChartComponent.init @ chart.component.js:231
ChartComponent.refresh @ chart.component.js:301
(anonymous) @ chart.component.js:396
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
AuditTimeSubscriber.clearThrottle @ auditTime.js:96
dispatchNext @ auditTime.js:102
AsyncAction._execute @ AsyncAction.js:111
AsyncAction.execute @ AsyncAction.js:86
AsyncScheduler.flush @ AsyncScheduler.js:36
ZoneDelegate.invokeTask @ vendors.js?78cf9b57189af0bd597d:14953
onInvokeTask @ core.umd.js:4123
ZoneDelegate.invokeTask @ vendors.js?78cf9b57189af0bd597d:14952
Zone.runTask @ vendors.js?78cf9b57189af0bd597d:14720
ZoneTask.invoke @ vendors.js?78cf9b57189af0bd597d:15015
timer @ vendors.js?78cf9b57189af0bd597d:16095
setInterval (async)
scheduleTask @ vendors.js?78cf9b57189af0bd597d:16103
ZoneDelegate.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14939
onScheduleTask @ vendors.js?78cf9b57189af0bd597d:14829
ZoneDelegate.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14933
Zone.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14764
Zone.scheduleMacroTask @ vendors.js?78cf9b57189af0bd597d:14787
(anonymous) @ vendors.js?78cf9b57189af0bd597d:16121
setInterval @ VM21:3
AsyncAction.requestAsyncId @ AsyncAction.js:65
AsyncAction.schedule @ AsyncAction.js:60
Scheduler.schedule @ Scheduler.js:43
AuditTimeSubscriber._next @ auditTime.js:83
Subscriber.next @ Subscriber.js:89
CombineLatestSubscriber._tryProject @ combineLatest.js:147
CombineLatestSubscriber.notifyNext @ combineLatest.js:131
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
AuditTimeSubscriber.clearThrottle @ auditTime.js:96
dispatchNext @ auditTime.js:102
AsyncAction._execute @ AsyncAction.js:111
AsyncAction.execute @ AsyncAction.js:86
AsyncScheduler.flush @ AsyncScheduler.js:36
ZoneDelegate.invokeTask @ vendors.js?78cf9b57189af0bd597d:14953
onInvokeTask @ core.umd.js:4123
ZoneDelegate.invokeTask @ vendors.js?78cf9b57189af0bd597d:14952
Zone.runTask @ vendors.js?78cf9b57189af0bd597d:14720
ZoneTask.invoke @ vendors.js?78cf9b57189af0bd597d:15015
timer @ vendors.js?78cf9b57189af0bd597d:16095
setInterval (async)
scheduleTask @ vendors.js?78cf9b57189af0bd597d:16103
ZoneDelegate.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14939
onScheduleTask @ vendors.js?78cf9b57189af0bd597d:14829
ZoneDelegate.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14933
Zone.scheduleTask @ vendors.js?78cf9b57189af0bd597d:14764
Zone.scheduleMacroTask @ vendors.js?78cf9b57189af0bd597d:14787
(anonymous) @ vendors.js?78cf9b57189af0bd597d:16121
setInterval @ VM21:3
AsyncAction.requestAsyncId @ AsyncAction.js:65
AsyncAction.schedule @ AsyncAction.js:60
Scheduler.schedule @ Scheduler.js:43
AuditTimeSubscriber._next @ auditTime.js:83
Subscriber.next @ Subscriber.js:89
BehaviorSubject._subscribe @ BehaviorSubject.js:28
Observable._trySubscribe @ Observable.js:57
Subject._trySubscribe @ Subject.js:97
Observable.subscribe @ Observable.js:45
Observable._subscribe @ Observable.js:116
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
AuditTimeOperator.call @ auditTime.js:62
Observable.subscribe @ Observable.js:42
subscribeToResult @ subscribeToResult.js:22
CombineLatestSubscriber._complete @ combineLatest.js:113
Subscriber.complete @ Subscriber.js:114
ArrayObservable._subscribe @ ArrayObservable.js:116
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
CombineLatestOperator.call @ combineLatest.js:79
Observable.subscribe @ Observable.js:42
AuditTimeOperator.call @ auditTime.js:62
Observable.subscribe @ Observable.js:42
ChartComponent.refreshWait @ chart.component.js:395
ChartComponent @ chart.component.js:92
createClass @ core.umd.js:10808
createDirectiveInstance @ core.umd.js:10634
createViewNodes @ core.umd.js:11984
callViewAction @ core.umd.js:12354
execComponentViewsAction @ core.umd.js:12293
createViewNodes @ core.umd.js:12011
createEmbeddedView @ core.umd.js:11877
callWithDebugContext @ core.umd.js:13020
debugCreateEmbeddedView @ core.umd.js:12553
TemplateRef_.createEmbeddedView @ core.umd.js:10215
ViewContainerRef_.createEmbeddedView @ core.umd.js:10007
(anonymous) @ permissions-directive.ts:35
SafeSubscriber.__tryOrSetError @ Subscriber.js:245
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
DistinctUntilChangedSubscriber._next @ distinctUntilChanged.js:103
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
DistinctUntilChangedSubscriber._next @ distinctUntilChanged.js:103
Subscriber.next @ Subscriber.js:89
SwitchMapSubscriber.notifyNext @ switchMap.js:124
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
observeState @ createStore.js:237
subscribe @ createStore.js:241
FromObservable._subscribe @ FromObservable.js:113
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
subscribeToResult @ subscribeToResult.js:22
SwitchMapSubscriber._innerSub @ switchMap.js:101
SwitchMapSubscriber._next @ switchMap.js:94
Subscriber.next @ Subscriber.js:89
FilterSubscriber._next @ filter.js:88
Subscriber.next @ Subscriber.js:89
BehaviorSubject._subscribe @ BehaviorSubject.js:28
Observable._trySubscribe @ Observable.js:57
Subject._trySubscribe @ Subject.js:97
Observable.subscribe @ Observable.js:45
FilterOperator.call @ filter.js:58
Observable.subscribe @ Observable.js:42
SwitchMapOperator.call @ switchMap.js:67
Observable.subscribe @ Observable.js:42
DistinctUntilChangedOperator.call @ distinctUntilChanged.js:60
Observable.subscribe @ Observable.js:42
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
DistinctUntilChangedOperator.call @ distinctUntilChanged.js:60
Observable.subscribe @ Observable.js:42
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
PermissionsDirective.ngOnInit @ permissions-directive.ts:32
checkAndUpdateDirectiveInline @ core.umd.js:10718
checkAndUpdateNodeInline @ core.umd.js:12097
checkAndUpdateNode @ core.umd.js:12065
debugCheckAndUpdateNode @ core.umd.js:12694
debugCheckDirectivesFn @ core.umd.js:12635
(anonymous) @ HomeComponent.html:50
debugUpdateDirectives @ core.umd.js:12620
checkAndUpdateView @ core.umd.js:12032
callViewAction @ core.umd.js:12347
execComponentViewsAction @ core.umd.js:12293
checkAndUpdateView @ core.umd.js:12038
callWithDebugContext @ core.umd.js:13020
debugCheckAndUpdateView @ core.umd.js:12560
ViewRef_.detectChanges @ core.umd.js:10129
RouterOutlet.activateWith @ router.umd.js:5335
ActivateRoutes.placeComponentIntoOutlet @ router.umd.js:4515
ActivateRoutes.activateRoutes @ router.umd.js:4496
(anonymous) @ router.umd.js:4432
ActivateRoutes.activateChildRoutes @ router.umd.js:4432
ActivateRoutes.activate @ router.umd.js:4406
(anonymous) @ router.umd.js:4023
(anonymous) @ Observable.js:110
SafeSubscriber.__tryOrSetError @ Subscriber.js:245
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
MergeMapSubscriber.notifyNext @ mergeMap.js:143
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
ScalarObservable._subscribe @ ScalarObservable.js:49
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
subscribeToResult @ subscribeToResult.js:22
MergeMapSubscriber._innerSub @ mergeMap.js:130
MergeMapSubscriber._tryNext @ mergeMap.js:127
MergeMapSubscriber._next @ mergeMap.js:110
Subscriber.next @ Subscriber.js:89
MergeMapSubscriber.notifyNext @ mergeMap.js:143
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
ReduceSubscriber._complete @ reduce.js:119
Subscriber.complete @ Subscriber.js:114
MergeMapSubscriber._complete @ mergeMap.js:135
Subscriber.complete @ Subscriber.js:114
ArrayObservable._subscribe @ ArrayObservable.js:116
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
MergeMapOperator.call @ mergeMap.js:85
Observable.subscribe @ Observable.js:42
ReduceOperator.call @ reduce.js:74
Observable.subscribe @ Observable.js:42
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
subscribeToResult @ subscribeToResult.js:22
MergeMapSubscriber._innerSub @ mergeMap.js:130
MergeMapSubscriber._tryNext @ mergeMap.js:127
MergeMapSubscriber._next @ mergeMap.js:110
Subscriber.next @ Subscriber.js:89
MergeMapSubscriber.notifyNext @ mergeMap.js:143
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
MergeMapSubscriber.notifyNext @ mergeMap.js:143
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
EverySubscriber.notifyComplete @ every.js:53
EverySubscriber._complete @ every.js:70
Subscriber.complete @ Subscriber.js:114
MergeMapSubscriber._complete @ mergeMap.js:135
Subscriber.complete @ Subscriber.js:114
ArrayObservable._subscribe @ ArrayObservable.js:116
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
MergeMapOperator.call @ mergeMap.js:85
Observable.subscribe @ Observable.js:42
EveryOperator.call @ every.js:33
Observable.subscribe @ Observable.js:42
subscribeToResult @ subscribeToResult.js:22
MergeMapSubscriber._innerSub @ mergeMap.js:130
MergeMapSubscriber._tryNext @ mergeMap.js:127
MergeMapSubscriber._next @ mergeMap.js:110
Subscriber.next @ Subscriber.js:89
EverySubscriber.notifyComplete @ every.js:53
EverySubscriber._complete @ every.js:70
Subscriber.complete @ Subscriber.js:114
MergeMapSubscriber._complete @ mergeMap.js:135
Subscriber.complete @ Subscriber.js:114
ArrayObservable._subscribe @ ArrayObservable.js:116
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
MergeMapOperator.call @ mergeMap.js:85
Observable.subscribe @ Observable.js:42
EveryOperator.call @ every.js:33
Observable.subscribe @ Observable.js:42
MergeMapOperator.call @ mergeMap.js:85
Observable.subscribe @ Observable.js:42
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
subscribeToResult @ subscribeToResult.js:22
MergeMapSubscriber._innerSub @ mergeMap.js:130
MergeMapSubscriber._tryNext @ mergeMap.js:127
MergeMapSubscriber._next @ mergeMap.js:110
vendors.js?78cf9b57189af0bd597d:15126 Error: Uncaught (in promise): TypeError: Cannot read property 'observers' of undefined
TypeError: Cannot read property 'observers' of undefined
    at ChartComponent.requiresHandlers (chart.component.js:291)
    at ChartInstanceObserver.requiresHandlers (main.js:461)
    at Chart.requiresHandlers (main.js:21076)
    at Chart._shouldAttachMouseMove (main.js:21873)
    at Chart._attachEvents (main.js:21107)
    at main.js:20591
    at ZoneDelegate.invoke (vendors.js?78cf9b57189af0bd597d:14920)
    at Zone.run (vendors.js?78cf9b57189af0bd597d:14680)
    at vendors.js?78cf9b57189af0bd597d:15315
    at ZoneDelegate.invokeTask (vendors.js?78cf9b57189af0bd597d:14953)
    at Zone.runTask (vendors.js?78cf9b57189af0bd597d:14720)
    at drainMicroTaskQueue (vendors.js?78cf9b57189af0bd597d:15148)
    at ChartComponent.requiresHandlers (chart.component.js:291)
    at ChartInstanceObserver.requiresHandlers (main.js:461)
    at Chart.requiresHandlers (main.js:21076)
    at Chart._shouldAttachMouseMove (main.js:21873)
    at Chart._attachEvents (main.js:21107)
    at main.js:20591
    at ZoneDelegate.invoke (vendors.js?78cf9b57189af0bd597d:14920)
    at Zone.run (vendors.js?78cf9b57189af0bd597d:14680)
    at vendors.js?78cf9b57189af0bd597d:15315
    at ZoneDelegate.invokeTask (vendors.js?78cf9b57189af0bd597d:14953)
    at Zone.runTask (vendors.js?78cf9b57189af0bd597d:14720)
    at drainMicroTaskQueue (vendors.js?78cf9b57189af0bd597d:15148)
    at resolvePromise (vendors.js?78cf9b57189af0bd597d:15267) [<root>]
    at vendors.js?78cf9b57189af0bd597d:15318:18 [<root>]
    at Zone.runTask (vendors.js?78cf9b57189af0bd597d:14720) [<root> => <root>]
    at drainMicroTaskQueue (vendors.js?78cf9b57189af0bd597d:15148) [<root>]

Answer 1

I found out that the root cause of this issue was improper Kendo npm package.

So my package.json looks like this one:

"@progress/kendo-angular-charts": "1.2.2",
"@progress/kendo-angular-dialog": "0.20.0",
"@progress/kendo-angular-intl": "1.2.2",
"@progress/kendo-angular-l10n": "0.3.0",
"@progress/kendo-angular-popup": "0.17.0",
"@progress/kendo-drawing": "1.1.2",
"@progress/kendo-theme-default": "2.33.5",

Actually it is only a part of my package.json but other parts do not matter. As you see I had "@progress/kendo-angular-charts": "1.2.2" which was depend on "@progress/kendo-charts": "1.9.0" . This package was updated from 1.9.0 to 1.11.0 . It was made automatically. When it was updated to 1.11.0 I started to get errors from the chart.component.js . The PlotAreaLeave callback was undefined (Actually I had two: PlotAreaHover and PlotAreaLeave but one of them was undefined ). That is why my angular component did not initialize and I lost the left click.

The solution
In my case the solution was to specified the previous version of "@progress/kendo-charts": "1.9.0" in package.json .