[ANGULAR] Prevent event bubbling in cellClick listener

[hltob]

Hello,

in Scheduler Pro I have the following features enabled:

[groupFeature] = "schedulerConfig.features.group"
[groupSummaryFeature] = "schedulerConfig.features.groupSummary"

In the group config I added edit-icon (class="tt-group-edit") to handle group edit process:

group: {
      field: 'group',
      renderer: ({isFirstColumn, count, groupRowFor, record}) => {
        if (isFirstColumn) {
          return StringHelper.xss`
                        <div class="tt-group-info">
                            <div class="name">${groupRowFor} (${count})</div>
                            <div class="title">${record.title}</div>
                        </div>
                        <div class="tt-group-edit"><i class="b-fa b-fa-pencil"></i></div>
                    `;
        } else {
          return '';
        }
      }
    }

For this edit-icon I defined the listener "cellClick":

listeners : {
      cellClick({ record, event }) {
        if (event.target.closest('.tt-group-edit')) {
          // TODO call Edit dialog here ...
          event.preventDefault();
          event.stopImmediatePropagation();
          event.stopPropagation();
        }
      },
    }

The problem is that collapse + expand still doing their work. But I want to prevent it when I click an action button / icon in this cell.

[mats]

Try instead cellMousedown event?

[hltob]

With cellMousedown it also expand/collapse.
The event only prevents expand-toggle when I set a breakpoint within the If-Statement.
Without the Breakpoint it won't work:

schedulerConfig = Object.assign(schedulerConfig, {
    listeners : {
      cellMousedown({ record, event }) {
        if (event.target.closest('.tt-group-edit')) {
          console.log('*** Open Edit dialog ***');
          // TODO Open Edit dialog !!!!
          event.preventDefault();
          event.stopPropagation();
          event.stopImmediatePropagation();
        } else {
          console.log('*** Expand / Collapse');
        }
      },
    }
  });
  

[marcio]

Hey hltob,

Thanks for the report, I created a ticket to check why that event.preventDefault is not working as expected https://github.com/bryntum/support/issues/6353

[mats]

As a workaround, add "b-action-item" to your icon CSS, does that fix it?

[hltob]

I call a function to open an edit-dialog in the click-handler:

schedulerConfig = Object.assign(schedulerConfig, {
    listeners : {
      cellMousedown({ record, event }) {
        if (event.target.closest('.tt-group-edit')) {
          console.log('*** Open Edit dialog ***');
          event.preventDefault();
          event.stopPropagation();
          event.stopImmediatePropagation();
          // Open Dialog
          this.onEdit(record.groupChildren[0].originalData.groupId);
        } else {
          console.log('*** Expand / Collapse');
        }
      },
    }
  });
  

onEdit(groupId: number) {
    const dialogRef = this.dialog.open(EditDialogComponent, {
      disableClose: true,
      data: {
        type: 'edit',
        values: {id: groupId}
      }
    });
    dialogRef.afterClosed().subscribe((updatedData) => {
        ...
    });
  }

The call of the edit-dialog fixes the problem. I don't no why.

[mats]

originalData is private btw, please change to:

          this.onEdit(record.groupChildren[0].groupId);

[hltob]

@mats thank you. I changed it.