Declined
Last Updated: 21 Jul 2022 08:22 by ADMIN
Deepali
Created on: 15 Jul 2022 07:48
Category: Kendo UI for Angular
Type: Feature Request
1
Autofocus on kendo input control should work when click on Label

Hi

On click of a label, I want my kendo numeric textbox to have focus, but it is not working. Following is my code.

 


<label for="kid">Currency</label>

<kendo-numerictextbox
  [attr.id]="'kid'"
  [format]="formatOptions"
  [min]="min"
  [max]="max"
  [step]="step"
  [autoCorrect]="true"  
  [spinners]="false"
  [formControl]="control"
  [changeValueOnScroll]="false"
>
</kendo-numerictextbox>

Issue is because, at the run time kendo generates a random ID, and appends that ID to the input box(.k-input) , instead of appending the id given by the user as above. This is causing the issue and focus is not set on input box when clicking in label. Could you please check it and suggest a solution.


"@progress/kendo-angular-inputs": "^9.0.0",

 

I know to associate any Kendo UI component with the Label, template reference variable is the way to go.


<label [for]="numerictextbox">NumericTextBox: </label>
<kendo-numerictextbox #numerictextbox>
</kendo-numerictextbox>

 

But what if my label and input box are coming from different components, then this template ref variable approach would not work. So i would suggest kendo to use traditional ID approach to set the focus on input element.

 

Kendo can use HostBinding property from Angular , to remove ID from kendo-numerictextbox level, and adding the user supplied ID directly to inner input element.


@HostBinding('attr.id') _id = null;

  @Input() id?: string;

 

Thank You

1 comment
ADMIN
Dimiter Topalov
Posted on: 21 Jul 2022 08:22

Hi Deepali,

The native HTML Label elements will not work with complex Angular components that have focusable elements nested within the main wrapper (like the NumericTextBox component). This is why we provide the KendoLabel and FloatingLabel components, and the Label directive:

https://www.telerik.com/kendo-angular-ui/components/labels/

https://www.telerik.com/kendo-angular-ui/components/labels/label/association/

https://www.telerik.com/kendo-angular-ui/components/labels/label/label-directive/

https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel/association/

Regards,
Dimiter Topalov
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.