Focus element Flexgrid with Angular 5

Posted by: nildoni2 on 6 August 2018, 11:38 pm EST

  • Posted 6 August 2018, 11:38 pm EST

    Hello,

    I'm using Wijmo 5.2x in an Angular 5 project and i have problem with "focus" only with Firefox,

    i have a form, and i use wijmo grid, when i click on the input the value automatically changes to " wj-control wj-content wj-flexgrid ng-dirty ng-invalid wj-state-empty ng-touched wj-state-focused", and when I click outside the "wj-flex-grid", the value goes back to "wj-control wj-content wj-flexgrid ng-dirty ng-invalid wj-state-empty ng-touched", and it works well with google chrome, by cons on firefox, i have to double click on the input for the focus works , or i click in the "wj-flex-grid" and then i click on the input.

    Chrome version : 68.
    Firefox version : 61.

    Thank you in advance!
  • Replied 8 August 2018, 2:40 pm EST

    Hi,
    We are sorry for the delayed response on this.

    Could you please let us know more about your implementation like how you are using FlexGrid with the form?
    Are you using any cell templates?
    How are form controls attached to the grid, dynamically or via templates?

    Also can you please share code snippet or small sample reflecting your issue, that would be a great help in investing the cause.

    ~Manish
  • Replied 8 August 2018, 8:03 pm EST

    Hi Manish,

    Thnak you for your answer.

    Yeah i use cell templates.

    This is my code to understand better:

    <wj-flex-grid id="wj_flex_grid_1" #grilleWijmo
    [selectionMode]="'None'"
    [class.firstcolonnecombo]="isFirstColonneCombo"
    formArrayName="listeCorrespondance">
    <wj-flex-grid-filter id="wj_flex_grid_filter_1" [filterColumns]="['valuein','valueout']"></wj-flex-grid-filter>
    <wj-flex-grid-column id="wj_flex_grid_column_1"
    [binding]="'valuein'"
    [width]="'*'"
    [header]="'in'">
    <ng-template id="ng_template_1"
    wjFlexGridCellTemplate
    [cellType]="'Cell'"
    let-item="item"
    let-cell="cell">
    <ng-container id="ng_container_1" [formGroupName]="cell.row.index">
    <input id="input_1"
    type="text"
    [required]="true"
    *ngIf="!firstColonne"
    [(ngModel)]="item.in"
    formControlName="in"
    (blur)="verification(item, true, cell.row.index)"
    [class.valide]="saveclic">
    <wj-combo-box id="wj_combo_box_1" #cb
    *ngIf="firstColonne"
    [itemsSource]="listevalue"
    [(ngModel)]="item.value"
    [wjModelProperty]="'text'"
    formControlName="valuein"
    (lostFocus)="verification(item, true, cell.row.index)"
    [isEditable]="true"
    [isRequired]="true"
    [class.valide]="saveclic">
    </wj-combo-box>
    </ng-container>
    </ng-template>
    </wj-flex-grid-column>



    Thank you.
  • Replied 12 August 2018, 2:19 am EST

    Hi,
    Thank you for sharing code snippet and reporting this issue.
    We are able to replicate the issue at our end and it seems an issue. Hence, this issue has been forwarded to the concerned team with tracking id 338353.

    ~Manish
  • Replied 22 August 2018, 6:25 pm EST

    Hi,

    is there a solution for the problem ?

    Thank you,
  • Replied 23 August 2018, 3:53 pm EST

    Hi,
    The issue is still with the dev. We are sorry but we are unable to provide an ETA.
    In the meantime you may handle mousedown event on grid's hostElement and call focus() method on the input element as a workaround.
    Please refer to the following code snippet:-
    grid.hostElement.addEventListener('mousedown', (e)=>{
    if(e.target instanceof HTMLInputElement){
    setTimeout(()=>e.target.focus());
    }
    });

    You may also refer to the following sample implementing the same:-
    https://stackblitz.com/edit/angular-3katbv?file=app/app.component.ts

    ~Sharad
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels