Popup on NumericTextBox error

[Glenn Boothe]

I get this error:

TypeError: element.getBoundingClientRect is not a function

When trying to show a popup on a numeric text box. Please see my Plunker

https://plnkr.co/edit/yiFG7JrF49vEVJspCmiG?p=preview

Am I doing something wrong or is this a bug?

[Glenn Boothe]

It looks like I get the same results with any kendo input. I've tried drop down list and date picker. My work around for now is to add an empty span between them.

 

<kendo-numerictextbox formControlName="count"></kendo-numerictextbox>
<span #countValid></span>
<kendo-popup [anchor]="countValid" *ngIf="!editFormGroup.controls.count.valid && !editFormGroup.controls.count.pristine">
    Count is required
</kendo-popup>

[Georgi Krustev]

Hi Glenn,

By default, the Angular compiler will select the NumericTextBox component from the element, but the Popup `anchor` property expects an ElementRef instance. That being said, you will need to instruct the compiler to select the proper element using the `read` configuration. Check the modified plunker:

https://plnkr.co/edit/XlQMOXBCD9eqT7Nty7no?p=preview

Regards,
Georgi Krustev
Progress Telerik

[IT AE]

Using numericInput should work, too:

<kendo-numerictextbox #countValid formControlName="count"></kendo-numerictextbox>
<kendo-popup [anchor]="countValid.numericInput" *ngIf="!editFormGroup.controls.count.valid && !editFormGroup.controls.count.pristine">
    Count is required
</kendo-popup>