Tab Focus Behavior Not Consistent With Input

[Alex]

When tabbing into an input element that has a value, the entire value is selected. However, when tabbing into a NumericTextBox that has a value in it, the value is not selected and the cursor is placed in front of the value.

Go to https://stackblitz.com/edit/geamde?file=src/main.vue and enter values for all 3 fields, click the first field, then tab to the second and third field to see an example. This is an example from the NumericTextBox documentation.

How can I make the behavior of NumericTextBox consistent with the other input fields?

 

[Petar]

Hi Alex,

You can achieve the desired functionality by adding the following code in the mounted hook of your application.

   mounted: function() {
     const ageInput = document.querySelectorAll('[name="age"]')[0];
     ageInput.addEventListener("focus", function(e){
       ageInput.select();
     })
   }

Here is a modified version of the StackBlitz project you sent me. This example implements the above code and demonstrates how the value of the NumericTextBox is selected when the component is focused. 

Let me know if you have any questions or need furhter assistance with the current ticket.

Regards,
Petar
Progress Telerik