Skip to content

Commit 8dc903c

Browse files
committed
fix(tooltip): scrollbar flickering, refactor
1 parent 45bbd93 commit 8dc903c

File tree

2 files changed

+21
-17
lines changed

2 files changed

+21
-17
lines changed
Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import { ComponentFactoryResolver, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
1+
import { ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
22
import { ListenersService } from '../services/listeners.service';
33
import { TooltipDirective } from './tooltip.directive';
44

55
describe('TooltipDirective', () => {
66
let document: Document;
77
let renderer: Renderer2;
88
let hostElement: ElementRef;
9-
let componentFactoryResolver: ComponentFactoryResolver;
109
let viewContainerRef: ViewContainerRef;
1110

1211
it('should create an instance', () => {
1312
const listenersService = new ListenersService(renderer);
14-
const directive = new TooltipDirective(document, renderer, hostElement, componentFactoryResolver, viewContainerRef, listenersService);
13+
const directive = new TooltipDirective(document, renderer, hostElement, viewContainerRef, listenersService);
1514
expect(directive).toBeTruthy();
1615
});
1716
});

projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
ComponentFactoryResolver,
32
ComponentRef,
43
Directive,
54
ElementRef,
@@ -92,10 +91,9 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
9291
};
9392

9493
constructor(
95-
@Inject(DOCUMENT) private document: any,
94+
@Inject(DOCUMENT) private document: Document,
9695
private renderer: Renderer2,
9796
private hostElement: ElementRef,
98-
private componentFactoryResolver: ComponentFactoryResolver,
9997
private viewContainerRef: ViewContainerRef,
10098
private listenersService: ListenersService
10199
) {}
@@ -150,10 +148,7 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
150148

151149
private createTooltipElement(): void {
152150
if (!this.tooltipRef) {
153-
const tooltipComponent =
154-
this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
155-
this.tooltipRef = tooltipComponent.create(this.viewContainerRef.injector);
156-
// this.tooltipRef = this.viewContainerRef.createComponent<TooltipComponent>(TooltipComponent);
151+
this.tooltipRef = this.viewContainerRef.createComponent<TooltipComponent>(TooltipComponent);
157152
// this.viewContainerRef.detach();
158153
}
159154
}
@@ -164,8 +159,8 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
164159
// @ts-ignore
165160
this.tooltipRef = undefined;
166161
this.popperInstance?.destroy();
167-
this.viewContainerRef.detach();
168-
this.viewContainerRef.clear();
162+
this.viewContainerRef?.detach();
163+
this.viewContainerRef?.clear();
169164
}
170165

171166
private addTooltipElement(): void {
@@ -174,36 +169,46 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit {
174169
}
175170
this.tooltipRef.instance.content = this.content;
176171
this.tooltip = this.tooltipRef.location.nativeElement;
172+
this.renderer.addClass(this.tooltip, 'd-none');
177173
this.renderer.addClass(this.tooltip, 'fade');
178174

175+
this.popperInstance?.destroy();
176+
179177
setTimeout(() => {
180178
this.popperInstance = createPopper(
181179
this.hostElement.nativeElement,
182180
this.tooltip,
183181
{ ...this.popperOptions }
184182
);
185183
this.viewContainerRef.insert(this.tooltipRef.hostView);
184+
this.renderer.appendChild(this.document.body, this.tooltip);
185+
if (!this.visible) {
186+
this.removeTooltipElement();
187+
return;
188+
}
186189
setTimeout(() => {
187190
this.tooltipId = this.getUID('tooltip');
188191
this.tooltipRef.instance.id = this.tooltipId;
192+
if (!this.visible) {
193+
this.removeTooltipElement();
194+
return;
195+
}
196+
this.renderer.removeClass(this.tooltip, 'd-none');
189197
this.tooltipRef.instance.visible = this.visible;
190-
this.renderer.appendChild(this.document.body, this.tooltip);
191198
this.popperInstance.forceUpdate();
192-
// this.tooltipRef.changeDetectorRef.markForCheck();
193199
}, 100);
194200
});
195201
}
196202

197203
private removeTooltipElement(): void {
204+
this.tooltipId = '';
198205
if (!this.tooltipRef) {
199206
return;
200207
}
201208
this.tooltipRef.instance.visible = this.visible;
202209
this.tooltipRef.instance.id = undefined;
203210
setTimeout(() => {
204-
this.viewContainerRef.detach();
205-
this.popperInstance?.destroy();
206-
this.tooltipId = '';
211+
this.viewContainerRef?.detach();
207212
}, 300);
208213
}
209214
}

0 commit comments

Comments
 (0)