Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Autocomplete dropdown width calculates on search #2

Merged
merged 6 commits into from
Nov 12, 2018
Merged

Autocomplete dropdown width calculates on search #2

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63cd38d
autocomplete size calculation works inside modal
Blackbaud-AlexKingman Oct 12, 2018
dcb649b
Merge branch 'master' into 2029-autocomplete-in-modal-fix
Blackbaud-AlexKingman Oct 22, 2018
6937c20
Merge branch 'master' into 2029-autocomplete-in-modal-fix
Blackbaud-AlexKingman Nov 12, 2018
f45f87f
reverted focus listner, now firing redraw event on search
Blackbaud-AlexKingman Nov 12, 2018
da8b2e2
minor formatting change
Blackbaud-AlexKingman Nov 12, 2018
92b0c1a
removed comment
Blackbaud-AlexKingman Nov 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/app/public/modules/autocomplete/autocomplete-adapter.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
} from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import 'rxjs/add/observable/fromEvent';

import {
Expand All @@ -23,12 +24,14 @@ export class SkyAutocompleteAdapterService {
this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
}

// Recalculate dropdown width on window resize or on skyAutocomplete focus.
public watchDropdownWidth(elementRef: ElementRef): void {
Observable
.fromEvent(this.windowRef.getWindow(), 'resize')
.subscribe(() => {
this.setDropdownWidth(elementRef);
});
merge(
Observable.fromEvent(this.windowRef.getWindow(), 'resize'),
Observable.fromEvent(elementRef.nativeElement.querySelector('input[skyAutocomplete], textarea[skyAutocomplete]'), 'focus')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at this from the context of the autocomplete component, resizing the dropdown when the input is focused seems odd ("Why do I need to resize the dropdown when the input is focused?"). I know it works for the specific use case in the vertical tabs/modal component, but is there a way to repaint the dropdown that's more obvious from the autocomplete's perspective?

Is the issue related to how vertical tabs paints its hidden panels?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dropdown only gets redrawn once on ViewInit, and then any time a window is resized, or a user focuses on the input. After conversation, we've decided to call redraw every time a search is made. Change incoming.

).subscribe(() => {
this.setDropdownWidth(elementRef);
});

this.windowRef.getWindow().setTimeout(() => {
this.setDropdownWidth(elementRef);
Expand Down
7 changes: 5 additions & 2 deletions src/app/public/modules/autocomplete/autocomplete.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
OnInit,
Output,
TemplateRef,
ViewChild
ViewChild,
AfterViewInit
} from '@angular/core';

import { Observable } from 'rxjs/Observable';
Expand Down Expand Up @@ -44,7 +45,7 @@ import { skyAutocompleteDefaultSearchFunction } from './autocomplete-default-sea
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SkyAutocompleteComponent
implements OnInit, OnDestroy, AfterContentInit {
implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {

@Input()
public set data(value: any[]) {
Expand Down Expand Up @@ -206,7 +207,9 @@ export class SkyAutocompleteComponent
this.closeDropdown();
}
});
}

public ngAfterViewInit(): void {
Blackbaud-AlexKingman marked this conversation as resolved.
Show resolved Hide resolved
this.adapter.watchDropdownWidth(this.elementRef);
}

Expand Down