How to set focus to dx-text-box?

Question

I use dev extreme UI framework in Angular application.

In documentation I have found how to set focus it says to use method focus()

But there is not focus in DxTextBoxComponent

How to set focus?

My code is:

@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;

  ngAfterViewInit() {
    this.inputName.instance.focus();
  }

HTML is:

<dx-text-box #name>

No effect

reference the html tag to a ViewChild (ie: yourTextbox). Then when you want to focus it just use this.yourTextbox.instance.focus(); — Jacopo Sciampi, Nov 28 '19 at 11:39
I refer to this documentation page: https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxTextBox/?search=textbox — POV, Nov 28 '19 at 11:46
https://js.devexpress.com/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Call_Methods — Reactgular, Nov 28 '19 at 11:48
You have to "get the instance" and then call `this.myWidget.instance.focus()` where `myWidget` was accessed via a `@ViewChild()` decorator. So this isn't a real Angular component. It's just a wrapper, and you have access the property `instance` to get at the inner widget, and word **widget** refers to jQuery Widgets by the way. Yuck! — Reactgular, Nov 28 '19 at 11:49

score 5 · Accepted Answer · edited Jul 24 '20 at 10:27

Your code looks correct. Make sure that you imported all required dependencies and DxTextBoxComponent and there is only one TextBox with this identifier on the page. This code doesn't work in CodeSandbox (I believe this issue is specific to CodeSanbox), but it works in a local project and in DevExtreme Widget Gallery. Add the following code there

app.component.html

<dx-text-box #name value="John Smith"></dx-text-box>

app.component.ts

//additional imports
import { ViewChild } from '@angular/core';
import { DxTextBoxComponent } from 'devextreme-angular';

//replace the AppComponent with this code
export class AppComponent {
    @ViewChild("name", { static: false }) inputName: DxTextBoxComponent;
    
    ngAfterViewInit() {
        this.inputName.instance.focus();
    }
}

I recorded a screencast.

If the ViewChild directive doesn't work, you can get the component's instance using the onInitialized event handler:

app.component.html

<dx-text-box #name (onInitialized)="getInstance($event)"></dx-text-box>

app.component.ts

export class AppComponent {
   inputName: any;

   getInstance(e) {
      this.inputName = e.component;
   }

   ngAfterViewInit() {
      this.inputName.focus();
   }
}

I also texted this approach locally and in their Widget Gallery. It doesn't require any additional imports and works fine.

It does not work there is no `.focus();` in inputName – POV Nov 30 '19 at 13:14 — POV, Nov 30 '19 at 13:14

score 1 · Answer 2 · answered Mar 27 '20 at 08:39

You're missing an instance. The instance of DxTextBoxComponent is dxTextBox, the instance of that has the focus() method.

ngAfterViewInit() {
    this.inputName.instance.instance.focus();
  }

Downside is that Angular compiler doesn't like this at all, so if you find a way around that get back to me :p

score 0 · Answer 3 · answered Nov 28 '19 at 11:49

0

You can try like this

TS

@ViewChild('search', { static: false }) public searchTextBox: DxTextBoxComponent;

someFunction() {
this.searchTextBox.instance.focus();
}

HTML

<dx-text-box  #search>
</dx-text-box>

<button (click)="someFunction()"></button>

answered Nov 28 '19 at 11:49

Yash Rami

2,276
1
10
16

It does not work, check this, I have tried this solution, there is not instance in `@ViewChild` – POV Nov 28 '19 at 11:51
did you try to put `focus()` line inside the time out like this `setTimeOut(resp => { this.searchTextBox.instance.focus(); }, 0)` – Yash Rami Nov 28 '19 at 11:52
bcs in my case it is working as expected without using a time out – Yash Rami Nov 28 '19 at 11:53

score 0 · Answer 4 · answered Mar 11 '21 at 15:33

0

Just in case. Here it is working code for React:

let theInstance;
const getInstance = (e) => {
    theInstance = e.component;
}
const someFunction = () => {
    theInstance.focus(); 
}
<TextBox onInitialized={e => getInstance(e)} />

answered Mar 11 '21 at 15:33

michal

115
6

score 0 · Answer 5 · answered Jun 06 '23 at 03:44

I confirm the answer from sometimes_elen.

However for me the focus() isn't fired if I don't put it in a timer such as:

  ngAfterViewInit() {
    setTimeout(() => {
      this.inputName.instance.focus();
    }, 500);
  }

My component is in a dx-popup, the delay to be on screen might be the cause of this.

I assume DevExtreme to be responsible from this bug and one more time I could only recommend not to use a library that is breaking your App life cycle.

How to set focus to dx-text-box?

5 Answers5