Prevent event bubbling in cellClick listener

[marciogurka]

Forum post

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.