Skip to content

Commit

Permalink
fix: highlight on combobox (#2932)
Browse files Browse the repository at this point in the history 
* fix: highlight on combobox

* added optional pipe input parameter

* incorporated review comments

* chore: lint issue

Co-authored-by: jmarkowski <jedrzej.markowski@sap.com>
Co-authored-by: deno <mladen.droshev@sap.com>
  • Loading branch information
@chrisdavisp @JKMarkowski @droshev
3 people committed Aug 14, 2020
1 parent 419ee01 commit d9635c1
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 33 deletions.
18 changes: 8 additions & 10 deletions libs/core/src/lib/combobox/combobox.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@
</ng-template>

<ng-template let-term="term" #itemSource>
<span *ngIf="!itemTemplate" [innerHTML]="term | displayFnPipe: displayFn | highlight: inputText:highlighting">
<span
*ngIf="!itemTemplate"
[innerHTML]="term | displayFnPipe: displayFn | highlight: inputText:highlighting && filterHighlight"
>
</span>
<ng-container *ngIf="itemTemplate">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: term }"></ng-container>
Expand All @@ -32,7 +35,6 @@
<ng-container *ngIf="!open" [ngTemplateOutlet]="controlTemplate"></ng-container>
</ng-template>


<ng-template #controlTemplate>
<fd-input-group
[compact]="compact"
Expand All @@ -45,7 +47,8 @@
(addOnButtonClicked)="onPrimaryButtonClick()"
[isExpanded]="!mobile && open && displayedValues.length"
[attr.aria-readonly]="readOnly"
(click)="mobile && isOpenChangeHandle(true)">
(click)="mobile && isOpenChangeHandle(true)"
>
<input
fd-auto-complete
[enable]="autoComplete && !mobile"
Expand Down Expand Up @@ -81,9 +84,7 @@
>
<ng-content></ng-content>
<ng-container *ngIf="groupFn">
<ng-container
*ngFor="let group of displayedValues | listGroupPipe: groupFn | keyvalue"
>
<ng-container *ngFor="let group of displayedValues | listGroupPipe: groupFn | keyvalue">
<li fd-list-group-header>
{{ group.key }}
</li>
Expand Down Expand Up @@ -113,10 +114,7 @@
class="fd-combobox-list-item"
[selected]="inputText === (term | displayFnPipe: displayFn)"
>
<ng-container
[ngTemplateOutlet]="itemSource"
[ngTemplateOutletContext]="{ term: term }"
></ng-container>
<ng-container [ngTemplateOutlet]="itemSource" [ngTemplateOutletContext]="{ term: term }"></ng-container>
</li>
</ng-container>
</ul>
Expand Down
42 changes: 19 additions & 23 deletions libs/core/src/lib/combobox/combobox.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ import { ComboboxMobileComponent } from './combobox-mobile/combobox-mobile.compo
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComboboxComponent implements ComboboxInterface, ControlValueAccessor, OnInit, OnChanges, AfterViewInit, OnDestroy {

export class ComboboxComponent
implements ComboboxInterface, ControlValueAccessor, OnInit, OnChanges, AfterViewInit, OnDestroy {
/** Values to be filtered in the search input. */
@Input()
dropdownValues: any[] = [];
Expand Down Expand Up @@ -146,6 +146,9 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
@Input()
highlighting = true;

/** Whether the matching string should be highlighted after combobox value is selected. */
filterHighlight = true;

/** Whether the popover should close when a user selects a result. */
@Input()
closeOnSelect = true;
Expand Down Expand Up @@ -241,9 +244,7 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
];

/** Keys, that will close popover's body, when dispatched on search input */
readonly closingKeys: string[] = [
'Escape'
];
readonly closingKeys: string[] = ['Escape'];

/** Whether the combobox is opened. */
open = false;
Expand All @@ -267,21 +268,18 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
private readonly _onDestroy$: Subject<void> = new Subject<void>();

/** @hidden */
onChange: any = () => {
};
onChange: any = () => {};

/** @hidden */
onTouched: any = () => {
};
onTouched: any = () => {};

/** @hidden */
constructor(
private _elementRef: ElementRef,
private _menuKeyboardService: MenuKeyboardService,
private _cdRef: ChangeDetectorRef,
private _dynamicComponentService: DynamicComponentService
) {
}
) {}

/** @hidden */
ngOnInit(): void {
Expand Down Expand Up @@ -334,26 +332,25 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
} else if (KeyUtil.isKey(event, this.closingKeys)) {
this.isOpenChangeHandle(false);
event.stopPropagation();
} else if (this.openOnKeyboardEvent &&
!event.ctrlKey &&
!KeyUtil.isKey(event, this.nonOpeningKeys)) {
} else if (this.openOnKeyboardEvent && !event.ctrlKey && !KeyUtil.isKey(event, this.nonOpeningKeys)) {
this.isOpenChangeHandle(true);
}
}

/** @hidden */
onListKeydownHandler(event: KeyboardEvent): void {
const index: number = this.listItems.toArray().findIndex(
item => item.itemEl.nativeElement === document.activeElement
);
const index: number = this.listItems
.toArray()
.findIndex((item) => item.itemEl.nativeElement === document.activeElement);
this._menuKeyboardService.keyDownHandler(event, index, this.listItems.toArray());
}

/** @hidden */
onMenuClickHandler(value: any): void {
if (value) {
const index: number = this.dropdownValues.findIndex(_value => _value === value);
const index: number = this.dropdownValues.findIndex((_value) => _value === value);
this._handleClickActions(value);
this.filterHighlight = false;
this.itemClicked.emit({ item: value, index: index });
}
}
Expand Down Expand Up @@ -422,6 +419,7 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
this._resetDisplayedValues();
this.isOpenChangeHandle(!this.open);
this.searchInputElement.nativeElement.focus();
this.filterHighlight = false;
}

/** @hidden */
Expand Down Expand Up @@ -477,7 +475,7 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
/** Method that picks other value moved from current one by offset, called only when combobox is closed */
private _chooseOtherItem(offset: number): void {
const activeValue: any = this._getOptionObjectByDisplayedValue(this.inputTextValue);
const index: number = this.dropdownValues.findIndex(value => value === activeValue);
const index: number = this.dropdownValues.findIndex((value) => value === activeValue);
if (this.dropdownValues[index + offset]) {
this.onMenuClickHandler(this.dropdownValues[index + offset]);
}
Expand All @@ -494,8 +492,7 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
.pipe(takeUntil(this._onDestroy$))
.subscribe((index) => this.onMenuClickHandler(index));
this._menuKeyboardService.focusEscapeBeforeList = () => this.searchInputElement.nativeElement.focus();
this._menuKeyboardService.focusEscapeAfterList = () => {
};
this._menuKeyboardService.focusEscapeAfterList = () => {};
}

/** @hidden */
Expand All @@ -515,6 +512,7 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso

/** @hidden */
private _defaultFilter(contentArray: any[], searchTerm: any): any[] {
this.filterHighlight = true;
if (typeof searchTerm === 'string') {
const searchLower = searchTerm.toLocaleLowerCase();
return contentArray.filter((item) => {
Expand All @@ -531,7 +529,6 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
}
}


/** @hidden*/
private _popoverOpenHandle(): void {
if (this._hasDisplayedValues) {
Expand Down Expand Up @@ -585,7 +582,6 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
}
}


/** @hidden */
private _hasDisplayedValues(): boolean {
return this.open && this.displayedValues && this.displayedValues.length > 0;
Expand Down

0 comments on commit d9635c1

Please sign in to comment.