How to autofocus the textbox when clicking on label?

[Deepali]

Hello

I have a question. 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",

 

Thank you

[Hetali]

Hello Deepali,

The Label can be associated to any HTML element using the id attribute. However, to associate any Kendo UI component with the Label, template reference variable is the way to go. Please find more details in this documentation page.

In order to focus on the Kendo UI NumericTextBox when the Label is clicked on, associate the for property of the Label to the template reference variable of the component. For example:

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

In this StackBlitz example, the NumericTextBox is focused when you click on the associated Label.

I hope this helps.

Regards,
Hetali
Progress Telerik

[Deepali]

Thanks Hetali for you reply. But here the problem with me is my label is in one component and kendo-numerictextbox is coming from another component. In this case using template reference variable is not working.

[Deepali]

I would suggest Kendo should also use id approach to set the focus instead of template ref variable.

[Hetali]

Hi Deepali,

I understand your frustration. 

I did notice the Feature Request created by you and added a vote on your behalf. Please follow the request to receive future status updates pertaining to the same. Based on the votes, feasibilty, etc, the feature will be considered and added to our roadmap.

Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik