Angular 2 Flex grid raise duplicate blur event with cellTemplate edit

Angular 2 Flex grid raise duplicate blur event with cellTemplate edit

Posted by: luonguit on 14 March 2019, 5:16 am EST

• 

  luonguit

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 March 2019, 5:16 am EST

  Hi,

  I define edit template for cell with “wjCellTemplate”, then add handler event “blur” for input element inside of template.

  <wj-flex-grid [itemsSource]="itemsSource">
  
  	<wj-flex-grid-column header="Sales" binding="amount">
  		<ng-template wjFlexGridCellTemplate cellType="CellEdit" let-item="item">
  			<input type="text" (blur)="onLostFocus()"/>
      </ng-template>
    </wj-flex-grid-column>
  
  	<wj-flex-grid-column header="Check" binding="active">
  	</wj-flex-grid-column>
  
  </wj-flex-grid>
  

  onLostFocus() {
      console.log('lost focus');
    }
  

  demo online at: http://next.plnkr.co/edit/4NrDKzfAlrbMa9cm

  Current: 2 events blur raised on Chrome (bad effectly to my behavior logic).
  
  I check from the block at: wijmo.angular2.grid.js on “DirectiveCellFactory” → “updateCell” function, line 425:

  if (u.cellEditEnding.removeHandler(M), !t.stayInEditMode) {
                      var o = wjcCore.getActiveElement();
                      [b]o && o.dispatchEvent(p._evtBlur)[/b], i.focus()
                    }
  

  However, on IE not procedure for this case (1 blur event raised).
  
  Expect: 1 blur event raised on both Chrome & IE.

  => Pls confirm for me, this block is fix blur for IE? Which solution for me!

  Tks so much!

• 

  luonguit

  • Post Options:
  • Link
    Copy

  Posted 14 March 2019, 5:22 am EST

  Sorry, I add steps:

  1. DbClick on cell to start edit cell (cell has edit template, has a input element)
  2. Click to other cell

  => Input element raised duplicate 2 blur events.

  Tks so much!

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 18 March 2019, 3:10 am EST

  HI,

  It seems that your query has been answered. Please let me know if you have additional questions.

• 

  luonguit

  • Post Options:
  • Link
    Copy

  Posted 20 March 2019, 3:09 am EST

  Hi @abhishek.dutta,

  Sorry, the 2nd my answer to provide bug steps.

  My question:

  if (u.cellEditEnding.removeHandler(M), !t.stayInEditMode) {
                      var o = wjcCore.getActiveElement();
                      o && o.dispatchEvent(p._evtBlur), i.focus()
                    }
  

  => this block is fix blur for IE? Which solution for me!

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 March 2019, 8:50 am EST

  Hi,

  Sorry for the delayed response.
  
  The code in question is indeed a fix for the IE blur event problem. However, we have further escalated this case to the dev team for their input. We will share a tracking id for the case shortly.

  Regards