How to set the focus on an dxi-item

Question

We are using DevExtreme-Components from DevExpress in our Angular 6 application. We have a form built with the help of dxi-item elements like this:

<dx-form id="form" #manageOfferForm [formData]="getOfferToManageForView">
                <dxi-item class="dx-fieldset" itemType="group" caption="Projektstammdaten">
                        <dxi-item  dataField="description" [label]="{text: 'Description'}">
                        </dxi-item>
                 ...

Now my question is how can I set the focus on the dxi-item editor element from the controller?

Answer 1

First, create a method in your component, for example:

...
setFocus(e){
    e.component.focus();
}
...

Next, try to add it in your editor's options:

 <dxi-item 
     dataField="Description"
     [label]="{text: 'Description'}"
     [editorOptions]="{onInitialized: setFocus}">
 </dxi-item>

Note: if it doesn't work, try to add timeout in your setFocus method.

 ...
setFocus(e){
    setTimeout(() => {
        e.component.focus();
    }, 0);
}
...