WjFlexGrid - dropdown in a column header stops working when gridrow is selected

WjFlexGrid - dropdown in a column header stops working when gridrow is selected

Posted by: tina.kujawa on 4 September 2024, 6:01 pm EST

• 

  tina.kujawa

  • Post Options:
  • Link
    Copy

  Posted 4 September 2024, 6:01 pm EST

  Recently upgraded to wijmo 5.20241.19

  We have a WjFlexGrid that has some dropdowns embedded in the column headers of the grid. Issue I am having is that when we focus on a row in the grid - and then go to select from the column header dropdown control - the dropdown is disappearing/not displaying. I see it get focus and the dropdown appear - but then I see code in wijmo (es5-esm.js) that is getting called and setting focus (to the grid?) and makes the dropdown disappear (dropdown gets a lost focus). If there are no rows in the grid or no rows are focused - column header dropdown works as expected.
  
  Any thoughts on what could be happening in the grid when a row is focused that is causing that dropdown to lose focus as soon as it is clicked? If I debug and slow things down I can see the dropdown appear. But without debugging it just looks like the select never opens

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 5 September 2024, 9:38 am EST

  Hi Tina,

  We were able to replicate the issue when clicking glyph icon not when clicking anywhere else on the button. If you are facing the same issue, then this is a known issue and has been fixed in the nightly version. For the current Wijmo version you can use this workaround where we have stopped propagation on click event.

   theGrid.hostElement.addEventListener(
      'click',
      (e) => {
        const ht = theGrid.hitTest(e);
        if (
          ht.cellType == CellType.ColumnHeader &&
          e.target.classList.contains('wj-glyph-down') &&
          e.target.parentElement.ariaLabel == 'Toggle Dropdown'
        ) {
          e.stopImmediatePropagation();
        }
      },
      true
    );

  Please go through this sample https://stackblitz.com/edit/js-gyemzp?file=index.js for better understanding.

  In case, if your issue is still not resolved please modify the above sample to replicate your issue and share it with us, so that we can have a better understanding of the issue and assist you accordingly.

  Thanks, and regards.

• 

  tina.kujawa

  • Post Options:
  • Link
    Copy

  Posted 5 September 2024, 2:52 pm EST

  Thank you so much. The work around did the trick.