diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index 42e24a49f..3213d7986 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -342,4 +342,33 @@ describe('Select Component', () => { expect(onChange).not.toHaveBeenCalled(); flush(); })); + + test('should show clear selected button', fakeAsync(() => { + spectator = hostFactory( + ` + + + + `, + { + hostProps: { + options: selectionOptions, + selected: selectionOptions[1].value + } + } + ); + + spectator.tick(); + spectator.click('.trigger-content'); + + const clearSelectedButton = spectator.query('.clear-selected', { root: true }); + expect(clearSelectedButton).toExist(); + spectator.click(clearSelectedButton!); + + spectator.tick(); + expect(spectator.component.selected).toBe(undefined); + expect(spectator.query('.clear-selected', { root: true })).not.toExist(); + + flush(); + })); }); diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index 403fb53e9..dd41d9256 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -16,6 +16,7 @@ import { LoggerService, queryListAndChanges$, SubscriptionLifecycle, TypedSimple import { isEqual } from 'lodash-es'; import { EMPTY, merge, Observable, of } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; +import { ButtonRole, ButtonSize, ButtonStyle } from '../button/button'; import { IconSize } from '../icon/icon-size'; import { SearchBoxDisplayMode } from '../search-box/search-box.component'; import { SelectControlOptionComponent, SelectControlOptionPosition } from './select-control-option.component'; @@ -134,6 +135,16 @@ import { SelectSize } from './select-size'; + +
implements ControlValueAccessor, AfterContentIni this.propagateValueChangeToFormControl(this.selected); } + public onClearSelected(): void { + this.setSelection(); + } + private setSelection(value?: V): void { this.selected = value; this.selected$ = this.buildObservableOfSelected(); diff --git a/projects/components/src/select/select.module.ts b/projects/components/src/select/select.module.ts index cb0b8b984..a0007e290 100644 --- a/projects/components/src/select/select.module.ts +++ b/projects/components/src/select/select.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MemoizeModule } from '@hypertrace/common'; +import { ButtonModule } from '../button/button.module'; import { DividerModule } from '../divider/divider.module'; import { EventBlockerModule } from '../event-blocker/event-blocker.module'; import { IconModule } from '../icon/icon.module'; @@ -28,7 +29,8 @@ import { SelectComponent } from './select.component'; DividerModule, MemoizeModule, TraceSearchBoxModule, - EventBlockerModule + EventBlockerModule, + ButtonModule ], declarations: [ SelectComponent,