Kendo Angular Combobox breaks click event - html

Question

We have had a Kendo Angular implementation in place for several years now. We recently updated Kendo and Angular and we found that a click event we placed on a is now broken.
We have an outer div which contains our combobox and another div with an icon containing a click event that is broken. See the screenshot with the red arrow pointing to the broken div icon.
Below is the HTML and the css governing the div.
<div *ngIf="values.length < maxCardinality"
class="editor-row">
<kendo-combobox #selectBox
[data]="connectionCandidates$ | async"
[textField]="'_id'"
[valueField]="'name'"
[filterable]="true"
[placeholder]="'Search...'"
(selectionChange)="handleComboBoxValueChange($event)"
(filterChange)="handleFilter($event)"
class="reference-combobox">
<ng-template *ngIf="resultCount >= 50" kendoComboBoxNoDataTemplate>
<span i18n>50+ partial matches. Type more.</span>
</ng-template>
<ng-template *ngIf="resultCount == 0" kendoComboBoxNoDataTemplate>
<span i18n>No results found.</span>
</ng-template>
<ng-template kendoComboBoxItemTemplate let-dataItem>
<span class="row">
<div *ngIf="hasConnectionTo(dataItem)"
class="checkmark"></div>
<span class="item"
[ngClass]="{
connected: hasConnectionTo(dataItem)
}">
{{ dataItem.name }}
</span>
</span>
</ng-template>
</kendo-combobox>
<div
class="picker-button"
*ngIf="values.length < maxCardinality"
(click)="handleClickReferencePicker($event)"></div>
</div>
The Div at the end of this with the class "picker-button" is the broken click event.
CSS for the picker-button
.picker-button {
position: absolute;
top: 6px;
right: 32px;
cursor: pointer;
user-select: none;
outline: none;
display: flex;
flex: 0 0 auto;
align-content: center;
justify-content: center;
width: 24px;
height: 20px;
background-size: 20px 20px;
background: url($assets-dir + '/picker_multiple_blue.svg') 3px 2px no-repeat transparent;
&.disabled {
background: url($assets-dir + '/picker_multiple_grey.svg') 3px 2px no-repeat transparent;
}
}
I omitted the rest of the CSS file as I don't think its relevant.
I have moved the div outside of the div containing the combobox and I can get the click event to work. I have tinkered with removing some CSS elements as an experiment to no avail. Its worth nothing this is all within a kendo grid cell. Anyone that can toss any help would be great.

Answer 1

I was able to fix this by adding a z-index: 2; to the picker-button class. The Combobox updates added a z-index of 1 causing it to overwrite our click event.