[ANGULAR] List View Event Tool Tip not displaying always

[victor@hexmatrix.net]

Hello,

In the list view of our calendar, some events, when clicked, open the event view properly, but others don't.
We see no errors on the console and haven't found a data issue that could be causing this behavior, meaning events with similar data open up just fine.
Please see attached images of one event that, when clicked, opens the menu and one that doesn't.
Do you know what could be happening?

Angular 11
"@bryntum/calendar": "5.3.0",
"@bryntum/calendar-angular": "5.3.0",

Thank you in advance.

[marcio]

Hey victor,

By the screenshots, is difficult to say what could be causing that behavior. Could you please try on the latest version, just in case?

Also, if you could reproduce that on one of our demos or share a sample project with the behavior that you mentioned?

[victor@hexmatrix.net]

Hello,
Unfortunately, we cannot update to the latest version.
Our app was using Angular 8, and we had to upgrade to version 11 to be able to use your calendar successfully.
The upgrade was a major change and involved a lot of testing and adjusting to it.
Lastest version we have been able to use is 5.3.0. Any newer version throws errors of incompatibility with some of our other libraries.
Eventually, we'll continue upgrading our stack, but we don't have the time to do it now.
We have a stable version of the calendar running, and we are happy with 5.3.0 so far, but for this little detail.
Any other suggestions?

This is our tooltip configuration:

eventTooltip: {
      tools: {
        delete: false,
        edit: {
          cls: 'b-icon-calendar-day',
          tooltip: 'Edit Visit',
          weight: 655
        },
        tellusInfo: {
          cls: 'b-icon-clock',
          tooltip: 'EVV Info',
          handler: 'up.openTellusInfo',
          weight: 670
        },
        accessEvent: {
          cls: 'b-icon-edit',
          tooltip: 'Go To Report',
          handler: 'up.accessReport',
          weight: 665
        },
        unlockEvent: {
          cls: 'b-fa-unlock',
          tooltip: 'Unlock Visit',
          handler: 'up.unlockEvent',
          weight: 660
        },
        deleteEvent: {
          cls: 'b-fa-trash',
          tooltip: 'Delete Visit',
          handler: 'up.deleteEvent',
          weight: 650
        }
      } as any,
      listeners: {
        beforeShow(event): void {
          const {source: tip} = event;
          const eventRecord = event.source.eventRecord;
          const access = CalendarComponent.getAccess(eventRecord);
          

      tip.tools.tellusInfo.hidden = !access.canSeeTellusInfo;
      tip.tools.accessEvent.hidden = !access.canAccessNote;
      tip.tools.unlockEvent.hidden = !access.canUnlock;
      tip.tools.deleteEvent.hidden = !access.canDelete;
      tip.tools.edit.hidden = !access.canEdit;
    }
  },
  titleRenderer: eventRecord => eventRecord.name,
  renderer({eventRecord}): any {
    const tooltipData = {children: []};
    tooltipData.children.push(...[
      {
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['Client: ', {
          text: eventRecord.client_name
        }]
      },
      {
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['Provider: ', {
          text: eventRecord.provider_name
        }]
      },
      {
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['Date:', {
          text: moment(eventRecord.startDate).format('DD MMMM YYYY')
        }]
      },
      {
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['From:', {
          text: DateUtils.convertHoursFormat(moment(eventRecord.startDate).format('HH:mm'), '12hours'),
        }]
      },
      {
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['To', {
          text: DateUtils.convertHoursFormat(moment(eventRecord.endDate).format('HH:mm'), '12hours'),
        }]
      }
    ]);
    if (eventRecord.procedure) {
      tooltipData.children.push({
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['Procedure:', {
          text: eventRecord.procedure
        }]
      });
    }
    if (eventRecord.units) {
      tooltipData.children.push({
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['Units:', {
          text: eventRecord.units
        }]
      });
    }
    tooltipData.children.push({
      style: {
        display: 'grid',
        gridTemplateColumns: '7em 1fr'
      },
      children: ['Status:', {
        text: eventRecord.locked ? EventUtils.statusToMessage('locked') : EventUtils.statusToMessage(eventRecord.status)
      }]
    });
    if (eventRecord.related_supervision_status) {
      tooltipData.children.push({
        style: {
          display: 'grid',
          gridTemplateColumns: '7em 1fr'
        },
        children: ['Supervision:', {
          text: EventUtils.statusToMessage(eventRecord.related_supervision_status)
        }]
      });
    }
    return tooltipData;
  }
}

[marcio]

Hey,

By the configuration that you shared, there is nothing wrong that could cause the issue, you're not conditionally checking to render the tooltip and it doesn't seem to have a racing condition somewhere.

So we would need a runnable test case with your configuration and libraries to confirm what's happening there. You can get one of our demos, adapt it to your project, zip it, and share it here.

[Animal]

We'll get it fixed: https://github.com/bryntum/support/issues/7991

[Animal]

Try configuring your list view with this as a property:

    getEventElement(eventRecord, date = Math.max(eventRecord.startDate, this.firstVisibleDate || this.startDate)) {
        return this.eventContentElement.querySelector(`.b-grid-row[data-event-id="${eventRecord.id}"][data-date="${DH.makeKey(date)}"]`);
    }

Where DH refers to the Bryntum DateHelper class.

Let us know if this works round it.

[victor@hexmatrix.net]

Hello, thank you for taking your time and fix it.
The workaround works perfectly.
Greatly appreciate all your cooperation and support.