[Bug]: adding onCellClick on editor column removes autoEdit , doesn't remove selectEditor

[jmzagorski]

I'm submitting a bug report

Current behavior:
in example3.ts if you add an onCellClick to either select editor's column definition (% Complete or Prerequisite), it removes autoEdit and you have to double click to show the editor. Also, the single or multiple select editor stay open when clicking on another cell

Expected/desired behavior:
autoEdit stays enabled and editor goes away when moving to another cell

• What is the motivation / use case for changing the behavior?
  I am doing advanced filtering in the select editor when the user clicks the cells. I want to change the columnDef.params.collection depending on the dataContext. I have not been able to figure out why these problems occur. Maybe the autoEdit turns off because of this line.

Example of what I am doing. I have a grid of roles below and a column for users. Each row's multipleSelectEditor's collection should be filtered by the role column value (called title in the screenshot) to show the available users. You can also see the problem

the logic:

    onCellClick: ({ columnDef, dataContext }) => {
      columnDef.params.collection = this.users.filter(c => c.roles.find(t =>
        dataContext.jobTitle && t.jobTitleName === dataContext.jobTitle.displayName));
    }

[ghiscoding]

You should give a try to the regular onCellClick on the grid object and see if it works there. If that one also doesn't behave correctly there, then it's SlickGrid, else that would be something in gridEvent Service.

With a the grid object

grid.onCellChange.subscribe((e, args) => {
      console.log('onCellChange', args);
      this.updatedObject = args.item;
    });

The example 3 has all the code (in the column or on the grid object), you just need to comment out the portion you don't want.

[jmzagorski]

thanks for that suggestion. Using the grid's onClick event worked (a single clicked opens the editor and the select editor gets removed when clicking another cell). I can use this as a work around and leave this open so we can investigate when we have the time.

[ghiscoding]

Fixed in commit on major 2.x branch and cherry picked to master.

The issue is caused by this line e.stopImmediatePropagation(); that is in fact inside the onCellClick. Clicking on the cell, was triggering the stop immediate and stopping the click event bubbling.

I'm thinking about changing the signature of these 2 functions in our new Major release. I basically think that I should re-expose the event (just like SlickGrid does), so that the user can call a e.stopImmediatePropagation(); if he really wants to, without affecting the behavior of the GridEventService

  /** an event that can be used for triggering an action after a cell change */
-  onCellChange?: (args: OnEventArgs) => void;
+  onCellChange?: (e: Event, args: OnEventArgs) => void;

  /** an event that can be used for triggering an action after a cell click */
-  onCellClick?: (args: OnEventArgs) => void;
+  onCellClick?: (e: Event, args: OnEventArgs) => void;

With that new signature, a user could call a stop bubbling from the column definition

this.columnDefinitions = [
 {
      id: 'delete',
      field: 'id',
      formatter: Formatters.deleteIcon,
      onCellClick: (e, args) => {
        this.deleteFromBackend();
        e.stopImmediatePropagation();
     }
  }
];

[ghiscoding]

Exposed the Event as first argument in new upcoming 2,x Major version. Closed by commit