Focus element Flexgrid with Angular 5

Focus element Flexgrid with Angular 5

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

• 

  nildoni2

  • Post Options:
  • Link
    Copy

  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!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  nildoni2

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  nildoni2

  • Post Options:
  • Link
    Copy

  Posted 22 August 2018, 6:25 pm EST

  Hi,

  is there a solution for the problem ?

  Thank you,

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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