Merge pull request #7562 from opf/bump/ng-select

[30774][30760] Upgrade ng-select and workaround for position

frontend/npm-shrinkwrap.json

@@ -1299,10 +1299,18 @@
         }
       }
     },
+    "@ng-select/ng-option-highlight": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-option-highlight/-/ng-option-highlight-0.0.2.tgz",
+      "integrity": "sha512-lgDpL9eOaCNqH4xQq7jY7mEsuckuZZkzg+uLtEycjLl5YWkpG9lZaYo3rTUcOQafnhrIgieUBZmWItkMtiL8jw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@ng-select/ng-select": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-2.20.3.tgz",
-      "integrity": "sha512-QVyBiT2H6sljRrcNb4Wx7lABd08FQqWDJ/0LlfeWiP6N2Zc8+uSwCglkAgl7wu746mf7McVwL0H4ewVYnc+iHw==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-3.0.6.tgz",
+      "integrity": "sha512-nF9ie8S4RZ1UKM9Q0ew/O/i0sZZQB/h1DGRX7ezUo+9Q4NdtxonMF57q5IRbOu3TscWTjiilA7ThRXpWIjWOGg==",
       "requires": {
         "tslib": "^1.9.0"
       }

frontend/package.json

@@ -43,7 +43,8 @@
     "@angular/platform-browser": "8.2.2",
     "@angular/platform-browser-dynamic": "8.2.2",
     "@angular/router": "8.2.2",
-    "@ng-select/ng-select": "2.20.3",
+    "@ng-select/ng-option-highlight": "0.0.2",
+    "@ng-select/ng-select": "^3.0.6",
     "@types/assertion-error": "^1.0.30",
     "@types/chart.js": "^2.8.1",
     "@types/codemirror": "0.0.76",

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.component.ts

@@ -153,4 +153,13 @@ export class WorkPackageRelationsAutocomplete implements AfterContentInit {
         tap(() => this.isLoading = false)
       );
   }
+
+  onOpen() {
+    // Force reposition as a workaround for BUG
+    // https://github.com/ng-select/ng-select/issues/1259
+    setTimeout(() => {
+      const component = (this.ngSelectComponent) as any;
+      component.dropdownPanel._updatePosition();
+    }, 25);
+  }
 }

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.html

@@ -8,6 +8,7 @@
            [typeahead]="searchInput$"
            [closeOnSelect]="true"
            (close)="cancel()"
+           (open)="onOpen()"
            (change)="onWorkPackageSelected($event)">
   <ng-template ng-label-tmp let-item="item">
     {{item.type.name }} #{{ item.id }} {{ item.subject }}

frontend/src/app/modules/common/autocomplete/create-autocompleter.component.ts

@@ -155,6 +155,13 @@ export class CreateAutocompleterComponent implements AfterViewInit {
 
   public opened() {
     this.onOpen.emit();
+
+    // Force reposition as a workaround for BUG
+    // https://github.com/ng-select/ng-select/issues/1259
+    setTimeout(() => {
+      const component = (this.addAutoCompleter || this.autoCompleter) as any;
+      component.dropdownPanel._updatePosition();
+    }, 25);
   }
 
   public closed() {

frontend/src/app/modules/common/openproject-common.module.ts

@@ -92,6 +92,7 @@ import {AutofocusDirective} from "core-app/modules/common/autofocus/autofocus.di
 import {ShowSectionDropdownComponent} from "core-app/modules/common/hide-section/show-section-dropdown.component";
 import {IconTriggeredContextMenuComponent} from "core-components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component";
 import {NgSelectModule} from "@ng-select/ng-select";
+import {NgOptionHighlightModule} from "@ng-select/ng-option-highlight";
 
 export function bootstrapModule(injector:Injector) {
   return () => {
@@ -118,6 +119,7 @@ export function bootstrapModule(injector:Injector) {
     // Our own A11y module
     OpenprojectAccessibilityModule,
     NgSelectModule,
+    NgOptionHighlightModule,
 
     DynamicModule.withComponents([VersionAutocompleterComponent,
       CreateAutocompleterComponent]),
@@ -132,6 +134,7 @@ export function bootstrapModule(injector:Injector) {
     DragDropModule,
     OpenprojectAccessibilityModule,
     NgSelectModule,
+    NgOptionHighlightModule,
 
     OpDatePickerComponent,
     OpDateTimeComponent,

frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts

@@ -158,11 +158,15 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
   }
 
   public onOpen() {
-    jQuery(this.hiddenOverflowContainer).addClass('-hidden-overflow');
+    setTimeout(() => {
+      jQuery(this.hiddenOverflowContainer).addClass('-hidden-overflow');
+    }, 1000)
   }
 
   public onClose() {
-    jQuery(this.hiddenOverflowContainer).removeClass('-hidden-overflow');
+    setTimeout(() => {
+      jQuery(this.hiddenOverflowContainer).removeClass('-hidden-overflow');
+    }, 1000)
   }
 
   public onChange(value:HalResource) {

frontend/src/app/modules/global_search/input/global-search-input.component.html

@@ -21,7 +21,7 @@
               (focus)="onFocus()"
               (search)="search($event)"
               (open)="openCloseMenu(currentValue)"
-              (close)="select.filterValue = currentValue"
+              (close)="select.searchTerm = currentValue"
               (change)="onChange($event)"
               (keydown.enter)="onEnterBeforeResultsLoaded()"
               (keydown.escape)="blur()"

frontend/src/app/modules/global_search/input/global-search-input.component.ts

@@ -113,8 +113,8 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     // check searchterm on init, expand / collapse search bar and set correct classes
-    this.ngSelectComponent.filterValue = this.currentValue = this.globalSearchService.searchTerm;
-    this.expanded = (this.ngSelectComponent.filterValue.length > 0);
+    this.ngSelectComponent.searchTerm = this.currentValue = this.globalSearchService.searchTerm;
+    this.expanded = (this.ngSelectComponent.searchTerm.length > 0);
     jQuery('#top-menu').toggleClass('-global-search-expanded', this.expanded);
 
 
@@ -136,7 +136,7 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
         this.toggleMobileSearch();
         // open ng-select menu on default
         jQuery('.ng-input input').focus();
-      } else if (this.ngSelectComponent.filterValue.length === 0) {
+      } else if (this.ngSelectComponent.searchTerm.length === 0) {
         this.ngSelectComponent.focus();
       } else {
         this.submitNonEmptySearch();
@@ -179,7 +179,7 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
   }
 
   public search($event:any) {
-    this.currentValue = this.ngSelectComponent.filterValue;
+    this.currentValue = this.ngSelectComponent.searchTerm;
     this.openCloseMenu($event.term);
   }
 
@@ -196,14 +196,14 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
 
   public onFocusOut() {
     if (!this.deviceService.isMobile) {
-      this.expanded = (this.ngSelectComponent.filterValue.length > 0);
+      this.expanded = (this.ngSelectComponent.searchTerm.length > 0);
       this.ngSelectComponent.isOpen = false;
       jQuery('#top-menu').toggleClass('-global-search-expanded', this.expanded);
     }
   }
 
   public clearSearch() {
-    this.currentValue = this.ngSelectComponent.filterValue = '';
+    this.currentValue = this.ngSelectComponent.searchTerm = '';
     this.openCloseMenu(this.currentValue);
   }
 
@@ -311,7 +311,7 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
           this.globalSearchService.currentTab === 'work_packages') {
         window.history
           .replaceState({},
-            `${I18n.t('global_search.search')}: ${this.ngSelectComponent.filterValue}`,
+            `${I18n.t('global_search.search')}: ${this.ngSelectComponent.searchTerm}`,
             this.globalSearchService.searchPath());
 
         return;
@@ -321,7 +321,7 @@ export class GlobalSearchInputComponent implements OnInit, OnDestroy {
   }
 
   public blur() {
-    this.ngSelectComponent.filterValue = '';
+    this.ngSelectComponent.searchTerm = '';
     (<HTMLInputElement> document.activeElement).blur();
   }