Highlight text on focus - kendo combobox

Question

I am using kendo-combobox in my application.

The requirement is that onclick the value in inputs should get selected so that the user can directly type instead of clearing out manually.

I am using (focus)="selectValue($event)" to get the focus. Now in "selectValue($event)" I tried many ways to get the value selected.

This is not achievable by .select(), document.getElementById('myInput'), element.classList.select('.k-input');

All these implementations work well with input tags, not working well with kendo.

This below way can somewhat achieve this, but I am still not able to select the value. this.elRef.nativeElement.querySelector('.k-input').select();

Focus is achievable but the value should get selected as soon as focus is received.

HTML:

<kendo-combobox #test formControlName="region"
                                    [data]="regionOptions"
                                    [textField]="'displayName'"
                                    [valueField]="'id'"
                                    [virtual]="virtual"
                                    [filterable]="true"
                                    [kendoDropDownFilter]="{ operator: 'contains' }"
                                    (selectionChange)="regionSelectionChange($event)"
                                    (valueChange)="regionValueChange($event)"
                                    (keydown.enter)="$event.preventDefault()"
                                    (focus)="selectValue()">
                    </kendo-combobox>

JS Code -

 selectValue() {
    //this.myInput.select();
    console.log(document.getElementById('test'));
    //console.log($event);
    //this.elRef.nativeElement.querySelectorAll('.k-input').combobox.input.select();
    //his.elRef.nativeElement.querySelector('input').select();
    // this.elRef.nativeElement.querySelectorAll('.k-input').forEach(element => {
    //   console.log(element.value);
      //element.classList.select('.k-input');
      //element.value;
      // let test = element.getElementById('.k-input');
      // console.log(test);
    //});
  }

The commented versions are my trials till now.

Answer 1

Try this in your component:

// import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
@ViewChild('test', { static: true }) test: ComboBoxComponent;

selectValue(): void {
    const nativeElement = this.test.wrapper.nativeElement;
    if (nativeElement) {
        const input = nativeElement.querySelector('input');
        if (input) {
            input.select();
        }
    }
}

Basically what you're doing is creating a view child to reference the element defined in the template. Then in the focus event handler (named selectValue), you're getting the nativeElement, querying for the input, and then calling select on the input.

Answer 2

You can create a directive like this:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appSelectOnFocus]'
})
export class SelectOnFocusDirective {
  constructor(private el: ElementRef) {}

  @HostListener('focus', ['$event'])
  @HostListener('click', ['$event'])
  onFocus() {
    const el = this.el.nativeElement;
    if (el.type !== 'text' && el.tagName !== 'TEXTAREA') {
      return;
    }
    el.select();
  }
}