diff --git a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html index bc0edc79c2..a6b6316464 100644 --- a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html +++ b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html @@ -1,6 +1,7 @@ (); + /** + * Reference to the single MatSelect element embedded in this component + */ + @ViewChild("singleSelect") + private singleSelectElement?: MatSelect; + /** + * Reference to the multi MatSelect element embedded in this component + */ + @ViewChild("multiSelect") + private multiSelectElement?: MatSelect; + /** * @ignore * @internal @@ -222,7 +234,7 @@ export class StarkDropdownComponent extends AbstractStarkUiComponent * Whether the control is empty. */ public get empty(): boolean { - return !this.value; + return !this.value || (this.multiSelect && !this.value.length); } /** @@ -497,14 +509,15 @@ export class StarkDropdownComponent extends AbstractStarkUiComponent /** * Method implemented to use MatFormFieldControl * It handles a click on the control's container. - * @param event - Click Event */ - public onContainerClick(event: MouseEvent): void { - if ((event.target).tagName.toLowerCase() !== "input") { - const inputElement: HTMLElement = this.elementRef.nativeElement.querySelector("input"); - if (inputElement) { - inputElement.focus(); - } + public onContainerClick(): void { + // Mimic implementation of MatSelect: https://github.com/angular/components/blob/master/src/material/select/select.ts + if (!!this.singleSelectElement) { + this.singleSelectElement.focus(); + this.singleSelectElement.open(); + } else if (!!this.multiSelectElement) { + this.multiSelectElement.focus(); + this.multiSelectElement.open(); } }