CODEWITHSUNDEEP
angularangular7angular8devextremedevextreme-angular
POV
POV

Reputation: 12005

How to set focus to dx-text-box?

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

Upvotes: 3

Views: 10033

Answers (5)

Cublax
Cublax

Reputation: 1409

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.

Upvotes: 0

michal
michal

Reputation: 115

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)} />

Upvotes: 0

sometimes_elen
sometimes_elen

Reputation: 161

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.

Upvotes: 5

Jarizok
Jarizok

Reputation: 19

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

Upvotes: 1

Yash Rami
Yash Rami

Reputation: 2327

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>

Upvotes: 0

Related Questions