v15.2.2

* Fixed position issues if shown on click + hover w/ Chrome 115.0.5790.102 (closes [#52](#52))
tonysamperi · Aug 3, 2023 · d624f94 · d624f94
1 parent e3bb097
commit d624f94
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 56 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,6 @@
+#15.2.2
+* Fixed position issues if shown on click + hover w/ Chrome 115.0.5790.102 (closes [#52](https://github.com/tonysamperi/ngx-popperjs/issues/52))
+
 #15.2.1
 * Add type-safe popperLooseTrigger in popperLoose
 * Add type safety in popperLoosePlacement (thanks [k290](https://github.com/k290))

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-popperjs-repo",
-    "version": "15.2.1",
+    "version": "15.2.2",
     "build": 0,
     "license": "MIT",
     "description": "ngx-popperjs is an Angular wrapper for @popperjs",
@@ -90,4 +90,4 @@
         "tslint-consistent-codestyle": "^1.16.0",
         "typescript": "~4.8.4"
     }
-}
+}
diff --git a/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.html b/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.html
@@ -310,6 +310,9 @@ <h3 class="pop-title-light">
 						<li>CARAMEL: $0.49</li>
 					</ul>
 				</popper-content>
+				<div>
+					<a class="pop-link-yellow" href="javascript:void 0" (click)="showAlert()">Some action</a>
+				</div>
 				<img alt="Popcorn box"
 					 src="assets/images/popcorn-box.svg"
 					 [popper]="popperClickScrollContent"
@@ -343,7 +346,7 @@ <h3 class="pop-title-light">
 				<img alt="Popcorn box"
 					 src="assets/images/popcorn-box.svg"
 					 [popperLoose]="'My loose content with string placement'"
-					 [popperLoosePlacement]="'TOP'"
+					 [popperLoosePlacement]="'top'"
 					 class="pop-popcorn-box" />
 			</div>
 			<div>

diff --git a/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.ts b/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.ts
@@ -55,6 +55,10 @@ export class NgxPopperjsDemoComponent implements OnInit {
         // console.info("ON POPPER UPDATE FIRED!", $event);
     }
 
+    showAlert(): void {
+        alert("Ciao!");
+    }
+
     updatePosition(positionButton: NgxPopperjsPlacements): void {
         this.selectedPosition = positionButton;
         this._updateCode(NgxPopArticleTypes.position);

diff --git a/projects/ngx-popperjs/package.json b/projects/ngx-popperjs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-popperjs",
-    "version": "15.2.1",
+    "version": "15.2.2",
     "license": "MIT",
     "description": "ngx-popperjs is an Angular wrapper for @popperjs",
     "homepage": "https://tonysamperi.github.io/ngx-popperjs",
@@ -38,4 +38,4 @@
             "sass": "./_index.scss"
         }
     }
-}
+}
diff --git a/...ects/ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popper-content.component.ts b/...ects/ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popper-content.component.ts
@@ -21,6 +21,7 @@ import {ArrowModifier} from "@popperjs/core/lib/modifiers/arrow";
 import {Instance} from "@popperjs/core/lib/types";
 import {PreventOverflowModifier} from "@popperjs/core/lib/modifiers/preventOverflow";
 import {OffsetModifier} from "@popperjs/core/lib/modifiers/offset";
+import {fromEvent, Subject, takeUntil} from "rxjs";
 
 @Component({
     // tslint:disable-next-line:component-selector
@@ -35,14 +36,11 @@ export class NgxPopperjsContentComponent implements OnDestroy {
 
     static nextId: number = 0;
 
-    ariaHidden: string = "true";
     arrowColor: string | null = null;
-    displayType: string = "none";
     id: string = `ngx_poppperjs_${++NgxPopperjsContentComponent.nextId}`;
-    isMouseOver: boolean = false;
+    isMouseOver: boolean = !1;
     onHidden = new EventEmitter();
     onUpdate: () => any;
-    opacity: number = 0;
     popperInstance: Instance;
     popperOptions: NgxPopperjsOptions = {
         disableAnimation: false,
@@ -57,10 +55,29 @@ export class NgxPopperjsContentComponent implements OnDestroy {
     @ViewChild("popperViewRef", {static: !0})
     popperViewRef: ElementRef;
     referenceObject: HTMLElement;
-    state: boolean = true;
+    state: boolean = !1;
     text: string;
 
-    protected _globalResize: any;
+    protected readonly _baseModifiers: [OffsetModifier, ArrowModifier] = [
+        {
+            name: "offset",
+            enabled: !0,
+            options: {
+                offset: [0, 8],
+            }
+        } as OffsetModifier,
+        {
+            name: "arrow",
+            enabled: !0,
+            options: {
+                element: ".ngxp__arrow",
+                padding: 3
+            },
+            requires: ["arrow"]
+        } as ArrowModifier
+    ];
+    protected _destroy$: Subject<void> = new Subject<void>();
+    // protected _globalResize: any;
     protected _styleId = `${this.id}_style`;
 
     constructor(public elRef: ElementRef,
@@ -89,7 +106,6 @@ export class NgxPopperjsContentComponent implements OnDestroy {
     }
 
     hide(): void {
-
         if (this.popperInstance) {
             this.popperInstance.destroy();
         }
@@ -98,6 +114,7 @@ export class NgxPopperjsContentComponent implements OnDestroy {
     }
 
     ngOnDestroy() {
+        this._destroy$.next();
         this.clean();
         if (this.popperOptions.appendTo && this.elRef && this.elRef.nativeElement && this.elRef.nativeElement.parentNode) {
             this._viewRef.detach();
@@ -128,24 +145,7 @@ export class NgxPopperjsContentComponent implements OnDestroy {
         const popperOptions: Options = {
             strategy: this.popperOptions.positionFixed ? "fixed" : "absolute",
             placement: this.popperOptions.placement,
-            modifiers: [
-                {
-                    name: "offset",
-                    enabled: !0,
-                    options: {
-                        offset: [0, 8],
-                    }
-                } as OffsetModifier,
-                {
-                    name: "arrow",
-                    enabled: !0,
-                    options: {
-                        element: ".ngxp__arrow",
-                        padding: 3
-                    },
-                    requires: ["arrow"]
-                } as ArrowModifier,
-            ]
+            modifiers: this._baseModifiers
         } as Options;
         if (this.onUpdate) {
             popperOptions.onFirstUpdate = this.onUpdate as any;
@@ -171,15 +171,17 @@ export class NgxPopperjsContentComponent implements OnDestroy {
         }
         this._determineArrowColor();
         popperOptions.modifiers = popperOptions.modifiers.concat(this.popperOptions.popperModifiers);
-
+        this.toggleVisibility(!0);
         this.popperInstance = Popper(
             this.referenceObject,
             this.popperViewRef.nativeElement,
             popperOptions,
         );
-
-        this.toggleVisibility(true);
-        this._globalResize = this._renderer.listen("document", "resize", this.onDocumentResize.bind(this));
+        fromEvent(document, "resize")
+            .pipe(takeUntil(this._destroy$))
+            .subscribe({
+                next: () => this.onDocumentResize()
+            });
     }
 
     @HostListener("mouseleave")
@@ -191,19 +193,8 @@ export class NgxPopperjsContentComponent implements OnDestroy {
         this.hide();
     }
 
-    toggleVisibility(state: boolean) {
-        if (!state) {
-            this.opacity = 0;
-            this.displayType = "none";
-            this.ariaHidden = "true";
-            this.state = false;
-        }
-        else {
-            this.opacity = 1;
-            this.displayType = "block";
-            this.ariaHidden = "false";
-            this.state = true;
-        }
+    toggleVisibility(state: boolean): void {
+        this.state = state;
         // tslint:disable-next-line:no-string-literal
         if (!this._changeDetectorRef["destroyed"]) {
             this._changeDetectorRef.detectChanges();
@@ -214,11 +205,6 @@ export class NgxPopperjsContentComponent implements OnDestroy {
         this.popperInstance && (this.popperInstance as any).update();
     }
 
-    // TODO: check if this function might have had a purpose (unused at this time)
-    // private _clearGlobalResize() {
-    //   this._globalResize && typeof this._globalResize === "function" && this._globalResize();
-    // }
-
     protected _createArrowSelector(): string {
         return `div#${this.id}.ngxp__container > .ngxp__arrow.ngxp__force-arrow`;
     }

diff --git a/.../ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popperjs-content.component.html b/.../ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popperjs-content.component.html
@@ -2,11 +2,10 @@
      [attr.id]="id"
      [class.ngxp__container]="!popperOptions.disableDefaultStyling"
      [class.ngxp__animation]="!popperOptions.disableAnimation"
-     [style.display]="displayType"
-     [style.opacity]="opacity"
+     [class.ngxp__hide]="!state"
      [ngStyle]="popperOptions.styles"
      [ngClass]="extractAppliedClassListExpr(popperOptions.applyClass)"
-     attr.aria-hidden="{{ariaHidden}}"
+     attr.aria-hidden="{{!state}}"
      [attr.aria-describedby]="popperOptions.ariaDescribe || null"
      attr.role="{{popperOptions.ariaRole}}">
     <div *ngIf="text"

diff --git a/.../ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popperjs-content.component.scss b/.../ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popperjs-content.component.scss
@@ -4,13 +4,21 @@ popper-content {
 }
 
 .ngxp__container {
-  display: none;
+  display: block;
   position: absolute;
   border-radius: 3px;
   border: 1px solid grey;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 10px;
 
+  &.ngxp__hide {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+  }
+
   &.ngxp__animation {
     -webkit-animation: ngxp-fadeIn 150ms ease-out;
     -moz-animation: ngxp-fadeIn 150ms ease-out;