Skip to content

feat(autocomplete): add opened/closed events to panel #9904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 13, 2018
Merged

feat(autocomplete): add opened/closed events to panel #9904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 9 additions & 0 deletions src/lib/autocomplete/autocomplete-trigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {

if (this._panelOpen) {
this.autocomplete._isOpen = this._panelOpen = false;
this.autocomplete.closed.emit();
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it possible to emit the selected value if it's being closed as a result of a selection?

Copy link
Member Author

Choose a reason for hiding this comment

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

You should be able to pick that one up from the optionSelected event.

Copy link
Contributor

@julianobrasil julianobrasil Feb 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Yeah, I was kind of thinking of a way to implement (simplify my implementation of) the force selection. So if the closed emitted a null, I'd know that no option would have been selected. Without it, I think I'll have to combine closed with panelClosingActions. Something like (if panelClosingActions emits before closed):

this.trigger.autocomplete.closed
  .pipe(
    withLatestFrom(this.trigger.panelClosingActions)
  )

If the order of the events is inverted, I'll have to combine them in another way (maybe window operator?).

This dependency on the order of the emissions is not very comfortable.


if (this._overlayRef && this._overlayRef.hasAttached()) {
this._overlayRef.detach();
Expand Down Expand Up @@ -499,8 +500,16 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
this._closingActionsSubscription = this._subscribeToClosingActions();
}

const wasOpen = this.panelOpen;

this.autocomplete._setVisibility();
this.autocomplete._isOpen = this._panelOpen = true;

// We need to do an extra `panelOpen` check in here, because the
// autocomplete won't be shown if there are no options.
if (this.panelOpen && wasOpen !== this.panelOpen) {
this.autocomplete.opened.emit();
}
}

private _getOverlayConfig(): OverlayConfig {
Expand Down
37 changes: 35 additions & 2 deletions src/lib/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,38 @@ describe('MatAutocomplete', () => {
expect(fixture.componentInstance.panel.isOpen).toBeTruthy(
`Expected the panel to be opened on focus.`);
}));

it('should emit an event when the panel is opened', () => {
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();

expect(fixture.componentInstance.openedSpy).toHaveBeenCalled();
});

it('should not emit the opened event multiple times while typing', fakeAsync(() => {
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();

expect(fixture.componentInstance.openedSpy).toHaveBeenCalledTimes(1);

typeInElement('Alabam', input);
fixture.detectChanges();
tick();
fixture.detectChanges();

expect(fixture.componentInstance.openedSpy).toHaveBeenCalledTimes(1);
}));

it('should emit an event when the panel is closed', () => {
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();

fixture.componentInstance.trigger.closePanel();
fixture.detectChanges();

expect(fixture.componentInstance.closedSpy).toHaveBeenCalled();
});

});

it('should have the correct text direction in RTL', () => {
Expand All @@ -423,7 +455,6 @@ describe('MatAutocomplete', () => {

const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
expect(overlayPane.getAttribute('dir')).toEqual('rtl');

});

describe('forms integration', () => {
Expand Down Expand Up @@ -1814,7 +1845,7 @@ describe('MatAutocomplete', () => {
</mat-form-field>

<mat-autocomplete class="class-one class-two" #auto="matAutocomplete" [displayWith]="displayFn"
[disableRipple]="disableRipple">
[disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
<mat-option *ngFor="let state of filteredStates" [value]="state">
<span> {{ state.code }}: {{ state.name }} </span>
</mat-option>
Expand All @@ -1828,6 +1859,8 @@ class SimpleAutocomplete implements OnDestroy {
floatLabel = 'auto';
width: number;
disableRipple = false;
openedSpy = jasmine.createSpy('autocomplete opened spy');
closedSpy = jasmine.createSpy('autocomplete closed spy');

@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
@ViewChild(MatAutocomplete) panel: MatAutocomplete;
Expand Down
10 changes: 8 additions & 2 deletions src/lib/autocomplete/autocomplete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,12 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
@Output() readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent> =
new EventEmitter<MatAutocompleteSelectedEvent>();

/** Event that is emitted when the autocomplete panel is opened. */
@Output() readonly opened: EventEmitter<void> = new EventEmitter<void>();

/** Event that is emitted when the autocomplete panel is closed. */
@Output() readonly closed: EventEmitter<void> = new EventEmitter<void>();

/**
* Takes classes set on the host mat-autocomplete element and applies them to the panel
* inside the overlay container to allow for easy styling.
Expand Down Expand Up @@ -159,7 +165,7 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC

ngAfterContentInit() {
this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options).withWrap();
// Set the initial visibiity state.
// Set the initial visibility state.
this._setVisibility();
}

Expand All @@ -184,7 +190,7 @@ export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterC
this._classList['mat-autocomplete-visible'] = this.showPanel;
this._classList['mat-autocomplete-hidden'] = !this.showPanel;
this._changeDetectorRef.markForCheck();
}
}

/** Emits the `select` event. */
_emitSelectEvent(option: MatOption): void {
Expand Down