Angular Ag Grid Single Click Issue with IE 11

Question

I am using Ag Grid enterprise version 17.0 with Angular 5. I have enabled single click edit option. It works perfectly in Chrome on single click but it is not working in IE 11. I have to click multiple times to get the cell in edit mode. Can anyone please help me to fix the issue ?

Please find the below code which I am using for custom input texts. I have manually added click and dblclick events for it work in IE 11.

this.gridOptions.suppressClickEdit = false;
this.gridOptions.singleClickEdit = true;

Custom Input type

import { AfterViewInit, Component, ViewChild, ViewContainerRef ,ElementRef } from '@angular/core';

import { ICellEditorAngularComp } from 'ag-grid-angular/main';

@Component({
  selector: 'text-cell',
  template: `<input #input style="width: 100%; height: 100%;" (keydown)="onKeyDown($event)" [(ngModel)]="value" (dblclick) = "$event.target.select()" (click)="handleClick()">
              <button (click)="clear()" style="position:absolute;top:5px;right:2px;cursor:pointer;color:grey;background-color:white;border:none;">
                <span>&#10060;</span>
              </button>`
})
export class TextEditorComponent implements ICellEditorAngularComp, AfterViewInit {
  private params: any;
  public value: number;
  private cancelBeforeStart = false;

  @ViewChild('input', { read: ViewContainerRef }) public input;


  constructor(private elementRef : ElementRef){

  }

  agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;
    // only start edit if key pressed
    this.cancelBeforeStart = false;
  }

  getValue(): any {
    return this.value;
  }

  isCancelBeforeStart(): boolean {
    //return this.cancelBeforeStart;
    return this.params ? this.params.cancelEdit ? this.params.cancelEdit(this.params.node.data) : false : false;
  }

  clear(){
    this.value = null;
    return this.value;
  }

  onKeyDown(event: any): void {
    if (!this.isKeyPressedAlphaNumericOrBackSpace(event)) {
      if (event.preventDefault) {
        event.preventDefault();
      }
    }
  }

  // dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
  ngAfterViewInit() {
    this.input.element.nativeElement.focus();
  }

  private getCharCodeFromEvent(event: any): any {
    event = event || window.event;
    return (typeof event.which === 'undefined') ? event.keyCode : event.which;
  }

  private isCharAlphaNumeric(charStr: any): boolean {
    return true;

  }

  private isKeyPressedAlphaNumericOrBackSpace(event: any): boolean {
    const charCode = this.getCharCodeFromEvent(event);
    const charStr = event.key ? event.key : String.fromCharCode(charCode);
    return this.isCharAlphaNumeric(charStr) || charStr === 'Backspace' || charStr === 'Delete' || charStr === '.' || charStr === '-';
  }

  handleClick(){    
    setTimeout(()=>{
      this.elementRef.nativeElement.focus();
    },100);    
  }
}

Answer 1

Try to upgrade the ag-Grid version to the 20.2.0 version, I have created a sample using your code with this version, it seems that everything works well.