[ANGULAR] Event Tooltip is disapearing (Regression on 4.3.6)

[mats]

Ok can you please provide instructions on how we can reproduce this using one of our samples?

[striker]

Ok can you please provide instructions on how we can reproduce this using one of our samples?

I will be busy probably for few days to try to prepare test case, but shortly how you could reproduce it:

1) Angular 13
2) Latest SchedulerPro (4.3.6 or 4.3.7)
3) Using Angular Custom Elements to use own Component to render tooltip
4) Component should with min. 500px of height
5) Use it to event drag & drop
6) Google Chrome 98 (but occurs too on firefox)

our code

 // Here is showed tooltip on D&D
        eventDrag: <Partial<EventDragConfig>> {
          showExactDropPosition: false,
          tooltipTemplate: (data: any) => data.message,
          validatorFn: (event: any) => {
            const args: EventDragArgs = GanttUtilsHolder.instance.getEventDragArgs(event);

        const tooltipHtml: string = cfg.eventDragAndDropTooltipRenderer(args); // here use custom elements to render tooltip
        return { message: tooltipHtml };
      }
    },

[Animal]

So this is not the EventTip feature's tooltip that shows on hover of the event bar? It's the EventDrag features's tooltip which shows during drag that there is a problem with?

If so, we've been looking at the wring place all this time.

[striker]

So this is not the EventTip feature's tooltip that shows on hover of the event bar? It's the EventDrag features's tooltip which shows during drag that there is a problem with?

If so, we've been looking at the wring place all this time.

Yes. I wrote about 2 issues. First issue was disapearng tooltip after moving from task to task - it is fixed right now. Second issue still stays

[alex.l]

Ok, please update us when you'll have a test case. We have to be able to debug it.

[striker]

Ok can you please provide instructions on how we can reproduce this using one of our samples?

I will be busy probably for few days to try to prepare test case, but shortly how you could reproduce it:

1) Angular 13
2) Latest SchedulerPro (4.3.6 or 4.3.7)
3) Using Angular Custom Elements to use own Component to render tooltip
4) Component should with min. 500px of height
5) Use it to event drag & drop
6) Google Chrome 98 (but occurs too on firefox)

our code

 // Here is showed tooltip on D&D
        eventDrag: <Partial<EventDragConfig>> {
          showExactDropPosition: false,
          tooltipTemplate: (data: any) => data.message,
          validatorFn: (event: any) => {
            const args: EventDragArgs = GanttUtilsHolder.instance.getEventDragArgs(event);

        const tooltipHtml: string = cfg.eventDragAndDropTooltipRenderer(args); // here use custom elements to render tooltip
        return { message: tooltipHtml };
      }
    },

So... As I wrote how to reproduce it, I did exactly same things in test project and I was able to reproduce it. Why you didn't checked it before and requested a test case?

On test case I attached you can find three bugs.
1) Like in toopic, tooltip height is wrongly calculated.
2) Tooltip is showing only once (occurs on 4.3.5 too)
3) Experiencing lagging while moving event

Windows 10, Google Chrome 98, SchedulerPro 4.3.8 (latest), Latest stable Angular 13

Gif how it worked on 4.3.5:

4355.gif (2.88 MiB) Viewed 725 times

Gif how it's working on 4.3.8:

438.gif (3.96 MiB) Viewed 725 times

We hope for fast solving issue, because we're stuck on 4.3.5.

testcase.zip

(131.42 KiB) Downloaded 74 times

[Animal]

Does the tooltip have a minHeight?

It looks like the alignTo method which constrains the tooltip on align is being passed a minHeight which means a minimum height that it may be shrunk to before flipping sides.

[Animal]

That top gif is just extremely hard to see. Lots of extremely fast movement and flickering making it impossible to see what is happening.

Nothing has changed in this area. Has anything changed in your app? Like CSS?

[Animal]

I unzipped it all into a directory. I tried some incantations that have sometimes worked and they went bad. So how does one build this?

[striker]

Does the tooltip have a minHeight?

It looks like the alignTo method which constrains the tooltip on align is being passed a minHeight which means a minimum height that it may be shrunk to before flipping sides.

Tooltip container CSS:

.gantt-task-tooltip-container {
    height: 500px;
}

I unzipped it all into a directory. I tried some incantations that have sometimes worked and they went bad. So how does one build this?

Just use basic steps
1) npm install
2) npm start

(Node.js version v17.3.0, use latest npm version)