clearButton tabIndex

[Richard]

Hi All,

Using the clear button on kendo-textbox

 <kendo-textbox
              #firstName
              [clearButton]="true"
              formControlName="firstName"
            ></kendo-textbox>

Anyone know if you can set tabindex of clear button to -1 (or achieve similar)?  Tabbing to it when you're trying to enter info is annoying!

 

Many Thanks,

Rich

[Hetali]

Hi Richard,

In order to set the tabIndex of the clear button in the Kendo UI TextBox to -1, use the valueChange event to make the following changes:

<kendo-textbox 
  id="firstName" 
  [clearButton]="true" 
  (valueChange)="firstNameValueChange()"
>
</kendo-textbox>

public firstNameValueChange() {   
  setTimeout(() => {
    var clearButton = document.querySelector("#firstName .k-clear-value");
    if(clearButton) {
      clearButton['tabIndex'] = -1;
    }
  })
}

In this StackBlitz example, I have set the tabIndex of the TextBox clear button to -1 and hitting the Tab key takes you to the next form field.

Please let me know if this solution helps or if I can further assist you with the tabIndex of the TextBox clear button.

Regards,
Hetali
Progress Telerik

[Richard]

Hi Hetali,

Thank you for replying so soon.

Ah thats handy, I have a large-ish form so I have adapted the answer to use "querySelectorAll".  I apply an empty class to my inputs "form-input" for example:

 <kendo-textbox class="form-input" id="firstName" formControlName="firstName" [clearButton]="true" #firstName required></kendo-textbox>

Then I can change the timeout to find all 

     setTimeout(() => {
            const inputBoxes = document.querySelectorAll('.form-input');
            inputBoxes.forEach((inputBox) => {
              const clearButton = inputBox.querySelector('.k-clear-value');
              if (clearButton) {
                clearButton['tabIndex'] = -1;
              }
            });           
          });

At the moment I have put into form.valueChanges to save putting the "(valueChange)" in each control but haven't completely tested this yet.

 

Thanks again for your answer, I wouldn't have got a solution without it

Rich

 

this.form.valueChanges.subscribe(value => {