Kendo-angular: Set cursor position at the beginning of the masked input box

[budara]

Is it possible to set the cursor position at the beginning of the masked input box when focus on the element ?
http://plnkr.co/edit/VkXocOlpp2ejDARzaDdA?p=preview

See the plunker example. when click on the Focus the Input button, the cursor always tend to set at the end of the input box.

[rusev]

On focus the browser will position the cursor on the position from before the previous blur event. In case there wasn't blur event it will position the cursor after the last symbol.

The MaskedTextBox doesn't expose properties for controlling the cursor position. However there is a reference to the actual input element. This however is undocumented field. You can use it to position the cursor before focusing the component.

Example - http://plnkr.co/edit/N8DRDZSO1ESpZ3OQrQJI?p=preview

[tsvetomir]

Documenting the input field wouldn't do any harm, right?

[rusev]

Converting MaskedTextBox component into directive seems more elegant solution, but I guess it is too late for such breaking changes.

Maybe we should just document it after all.

[budara]

@rusev your plunker example does the trick for me, though setSelectionRange is not supported over all the browsers.
Thanks.

[rusev]

Should be working with most of the browsers. Anyway the moment you go aftter .nativeElement you are back in the real DOM world :).

The field is documented. The API reference for the MaskedTextBox component will be updated with next batch of updates.

[chriscurnow]

It took me about an hour to work out to do this from code rather than from a template button. (I want my masked text box to initially have focus when the form displays.) Probably other people know how to do this but I didn't. So I thought it might be useful to share my code here:

...
import { MaskedTextBoxComponent } from '@progress/kendo-angular-inputs';
...
@Component({...}}

export class myTextBoxComponent{
@ViewChild(MaskedTextBoxComponent) myInput: MaskedTextBoxComponent;
...
ngAfteViewInit(){
this.myInput.input.nativeElement.setSelectionRange(0,0);
this.myInput.focus()
}