setHoveredCell(item: any, swConfig: any, event: any,popupgrid: TemplateRef<{ [Key: string]: unknown }>) {
event.preventDefault();
if (this.transposed ? (swConfig.hwConfig == item.hwConfig) : (swConfig.testCase == item.testCase)) {
if ((!item.hasOwnProperty(‘hovered’) || item.hovered == false)) {
Object.defineProperty(swConfig, ‘hovered’, {
value: true,
writable: true,
enumerable: true,
configurable: true
});

  }
}
if (event.target.classList.contains('active-cell')) {
  
  if (this.popupRef) {
    this.popupRef.close();
    this.popupRef = null;
    const cellRect = event.target.getBoundingClientRect();
    const offsetX = cellRect.left;
    const offsetY = cellRect.bottom + window.scrollY;
    this.popupRef = this.popupService.open({
      content: popupgrid,
      offset: { top: offsetY, left: offsetX },
    });
  } else {
    const cellRect = event.target.getBoundingClientRect();
    const offsetX = cellRect.left;
    const offsetY = cellRect.bottom + window.scrollY;
    this.popupRef = this.popupService.open({
      content: popupgrid,
      offset: { top: offsetY, left: offsetX },
    });
  }
  // this.gridPopUpShow = true;
  // this.hoveredElement = swConfig;
  swConfig.hovered == true ? this.calculateFirstColumnWidth('grid1') : '';
}

}
When the last element in the grid is hovered to show the popup. the grid gets scrolled to the left automatically .

I tried adding prevent.default() method but stil its not working