Wijmo filter popup is flickering

Wijmo filter popup is flickering

Posted by: sdayal on 2 February 2022, 5:19 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 2 February 2022, 5:19 am EST

  Hi Wijmo Team,

  Wijmo filter popup(on which ascending/descending option and search appers) is flickering(opens and closes automatically) for us. Unable to reproduce this issue in snippet. But still can you please let us know what could be the reason or some workaround to prevent this issue.

  https://stackblitz.com/edit/angular-dbahg1?file=src/app/app.component.ts

  Thanks

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 2 February 2022, 5:45 am EST

  ++ This issue appears only for one column not for the other.

  Able to reproduce this issue in below link:
  
  https://stackblitz.com/edit/angular-cys4vb?file=src/app/app.component.
  
  It is happening bcz we have applied below code for one of the fix in which even though if we click on the column cell after 1/2 second the focus gets removed. This solution was give to use for one of our previous bug of focus shift.

  code:

  grid.hostElement.addEventListener(
  
  ‘mousedown’,
  
  (e) => {
  
  const ht = grid.hitTest(e);

      if (ht.col === 2) {
        //  this.grid.select(ht.row, ht.col);
        e.target.parentElement.focus();
        e.target.parentElement.click();
        e.target.focus();
      }
    },
    true
  );
  

  For above code of mousedown event cant we skip the header(mainly filter icon) part and only the click will apply on cell dropdown click?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 3 February 2022, 8:25 am EST

  Hello,

  Yes, you can update the mousedown event so that it doesn’t get triggered when the mousedown happens on the columnHeader cell. Please refer to the code snippet and sample link below demonstrating the same:

      
  grid.hostElement.addEventListener(
        'mousedown',
        (e) => {
          const ht = grid.hitTest(e);
          if (
            ht.col === 2 &&
           [b] ht.panel.cellType !== wjcGrid.CellType.ColumnHeader[/b]
          ) {
            e.target.parentElement.focus();
            e.target.parentElement.click();
            e.target.focus();
          }
        },
        true
      );
  
  

  Sample link: https://stackblitz.com/edit/angular-p47zxa?file=src/app/app.component

  Regards