From 5ed3c188e6d8276255a2c114d0b19a9ecbaa6f79 Mon Sep 17 00:00:00 2001 From: alextanlan Date: Fri, 3 Sep 2021 15:17:38 +0300 Subject: [PATCH 1/2] Tweak an overlay position for autocomplete picklist it should be under the main header by scrolling --- .../components/header/header.component.scss | 2 +- ...pleteActivityPicklistQuestion.component.ts | 49 +++++++++++++++++-- 2 files changed, 47 insertions(+), 4 deletions(-) diff --git a/ddp-workspace/projects/ddp-pancan/src/app/components/header/header.component.scss b/ddp-workspace/projects/ddp-pancan/src/app/components/header/header.component.scss index dba624e3b6..e56f1dce75 100644 --- a/ddp-workspace/projects/ddp-pancan/src/app/components/header/header.component.scss +++ b/ddp-workspace/projects/ddp-pancan/src/app/components/header/header.component.scss @@ -5,7 +5,7 @@ top: 0; left: 0; width: 100%; - z-index: 2000; + z-index: 1000; height: $header-height; transition: all 200ms linear; background-color: white; diff --git a/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts b/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts index 4b06fabb54..78ac9a50bc 100644 --- a/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts +++ b/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts @@ -1,5 +1,16 @@ -import { Component, Inject, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { + Component, + HostListener, + Inject, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, + ViewChild +} from '@angular/core'; import { FormControl } from '@angular/forms'; +import { MatAutocompleteTrigger } from '@angular/material/autocomplete'; +import { DOCUMENT } from '@angular/common'; import { Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, map, startWith, takeUntil } from 'rxjs/operators'; @@ -20,7 +31,10 @@ import { ConfigurationService } from '../../../services/configuration.service'; [placeholder]="block.picklistLabel" [matAutocomplete]="autoCompleteFromSource" /> - + @@ -44,6 +58,7 @@ import { ConfigurationService } from '../../../services/configuration.service'; `] }) export class AutocompleteActivityPicklistQuestion extends BaseActivityPicklistQuestion implements OnInit, OnDestroy, OnChanges { + @ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) autoComplete: MatAutocompleteTrigger; filteredGroups: ActivityPicklistNormalizedGroup[] = []; // options w/o a group filteredOptions: ActivityPicklistOption[] = []; @@ -53,7 +68,8 @@ export class AutocompleteActivityPicklistQuestion extends BaseActivityPicklistQu constructor( translate: NGXTranslateService, private sortPolicy: PicklistSortingPolicy, - @Inject('ddp.config') public config: ConfigurationService + @Inject('ddp.config') public config: ConfigurationService, + @Inject(DOCUMENT) private document: Document ) { super(translate); } @@ -168,4 +184,31 @@ export class AutocompleteActivityPicklistQuestion extends BaseActivityPicklistQu displayAutoComplete(option: ActivityPicklistOption | string): string { return typeof option === 'string' ? option : (option?.optionLabel || ''); } + + @HostListener('window: scroll') public onWindowScroll(): void { + if (this.autoComplete?.panelOpen) { + // set z-index for the autocomplete overlay less then for our header (header z-index = 1000) + // in order to scroll the opened autocomplete picklist under the header. + // It's tough to tweak by css + // (known Angular issue - https://github.com/angular/components/issues/1432) + this.setStyleToElement(this.overlayContainer, 'zIndex', '900'); + } + } + + onAutocompleteClose(): void { + // reset z-index for the autocomplete overlay to default value (1000) + // in order to other components, which used the common overlay container (i.g. language-selector), + // would have the default behavior + this.setStyleToElement(this.overlayContainer, 'zIndex', '1000'); + } + + private get overlayContainer(): HTMLElement { + return this.document.querySelector('.cdk-overlay-container'); + } + + private setStyleToElement(element: HTMLElement, styleProperty: string, value: string): void { + if (element && styleProperty) { + element.style[styleProperty] = value; + } + } } From 47db00543b03a023af66f2c0ed222dc0a424d7f1 Mon Sep 17 00:00:00 2001 From: alextanlan Date: Fri, 3 Sep 2021 17:12:18 +0300 Subject: [PATCH 2/2] Fix a typo --- .../picklist/autocompleteActivityPicklistQuestion.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts b/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts index 78ac9a50bc..b0617291eb 100644 --- a/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts +++ b/ddp-workspace/projects/ddp-sdk/src/lib/components/activityForm/picklist/autocompleteActivityPicklistQuestion.component.ts @@ -197,7 +197,7 @@ export class AutocompleteActivityPicklistQuestion extends BaseActivityPicklistQu onAutocompleteClose(): void { // reset z-index for the autocomplete overlay to default value (1000) - // in order to other components, which used the common overlay container (i.g. language-selector), + // in order to other components, which used the common overlay container (e.g. language-selector), // would have the default behavior this.setStyleToElement(this.overlayContainer, 'zIndex', '1000'); }