diff --git a/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html b/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html index 671374af1e..bf1ee93163 100644 --- a/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html +++ b/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html @@ -67,7 +67,6 @@ [extraClass]="'secondary min-w-full'" [showTitle]="false" [choices]="dropdownChoices" - [selectedValueExpectedAsObject]="true" [selected]="wizardFieldData" ariaName="search-sort-by" > diff --git a/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts b/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts index 1bfe78ab20..087ff3285c 100644 --- a/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts +++ b/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts @@ -103,7 +103,7 @@ export class WizardFieldComponent implements AfterViewInit, OnDestroy { return data ? new Date(Number(data)) : new Date() } case WizardFieldType.DROPDOWN: { - return data ? JSON.parse(data) : this.dropdownChoices[1] + return data ? JSON.parse(data) : this.dropdownChoices[1].value } } } diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.spec.ts b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.spec.ts index 0cc8561b5a..a4ce0b1836 100644 --- a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.spec.ts +++ b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.spec.ts @@ -25,7 +25,6 @@ describe('DropdownSelectorComponent', () => { { label: 'B', value: 'b' }, { label: 'C', value: 'c' }, ] - component.selectedValueExpectedAsObject = false fixture.detectChanges() }) @@ -47,14 +46,30 @@ describe('DropdownSelectorComponent', () => { }) }) - describe('when clicking an item with selectedValueExpectedAsObject', () => { + describe('when an existing value is provided', () => { beforeEach(() => { - component.selectedValueExpectedAsObject = true + component.selected = 'b' }) - it('emits the correct item as Json object', () => { - component.selectedValueExpectedAsObject = true - component.onSelectValue({ label: 'A', value: 'a' }) - expect(emitted).toEqual(JSON.stringify({ label: 'A', value: 'a' })) + it('selects the corresponding choice', () => { + expect(component.selectedChoice).toEqual({ label: 'B', value: 'b' }) + }) + }) + + describe('when no selected value is provided', () => { + beforeEach(() => { + component.selected = undefined + }) + it('selects the first choice', () => { + expect(component.selectedChoice).toEqual({ label: 'A', value: 'a' }) + }) + }) + + describe('when the selected value is not part of the choices', () => { + beforeEach(() => { + component.selected = 'blarg' + }) + it('selects the first choice', () => { + expect(component.selectedChoice).toEqual({ label: 'A', value: 'a' }) }) }) }) diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.stories.ts b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.stories.ts index d3c7fb3459..c7f365502f 100644 --- a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.stories.ts +++ b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.stories.ts @@ -48,8 +48,7 @@ Primary.args = { value: 'choice3', }, ], - selected: { label: 'My Choice 1', value: 'choice1' }, - selectedValueExpectedAsObject: true, + selected: 'choice1', showTitle: true, } Primary.argTypes = { diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts index 761bac564a..6d5ab09dfb 100644 --- a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts +++ b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts @@ -4,7 +4,6 @@ import { ConnectedPosition, } from '@angular/cdk/overlay' import { - AfterContentChecked, ChangeDetectionStrategy, Component, EventEmitter, @@ -26,13 +25,12 @@ export type DDChoices = Array<{ styleUrls: ['./dropdown-selector.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DropdownSelectorComponent implements AfterContentChecked, OnInit { +export class DropdownSelectorComponent implements OnInit { @Input() title: string @Input() showTitle = true @Input() ariaName: string @Input() choices: DDChoices @Input() selected: any - @Input() selectedValueExpectedAsObject: boolean @Input() maxRows: number @Input() extraClass = '' @Output() selectValue = new EventEmitter() @@ -57,47 +55,33 @@ export class DropdownSelectorComponent implements AfterContentChecked, OnInit { offsetY: -8, }, ] - selectedObject: Choice + get selectedChoice(): Choice { + return ( + this.choices.find((choice) => choice.value === this.selected) ?? + this.choices[0] + ) + } get id() { return this.title.toLowerCase().replace(/[^a-z]+/g, '-') } getChoiceLabel(): string { - return this.selectedObject ? this.selectedObject.label : '' + return this.selectedChoice.label } ngOnInit(): void { if (!this.maxRows) this.maxRows = 6 } - ngAfterContentChecked(): void { - if (!this.selected && this.choices) { - this.selected = this.getExpectedSelectionFromChoice(this.choices[0]) - } - if (this.selected && this.choices && this.selectedObjecthasToBeSet()) { - const newSelectionObject = this.selectedValueExpectedAsObject - ? this.selected - : this.choices?.filter((choice) => choice.value == this.selected)[0] - if (newSelectionObject) { - this.selectedObject = newSelectionObject - } - } - } - isSelected(choice) { - return choice === this.selectedObject + return choice === this.selectedChoice } onSelectValue(choice: Choice): void { this.closeOverlay() - this.selectedObject = choice - this.selected = this.getExpectedSelectionFromChoice(choice) - this.selectValue.emit( - this.selectedValueExpectedAsObject - ? JSON.stringify(this.selected) - : this.selected - ) + this.selected = choice.value + this.selectValue.emit(this.selected) } openOverlay() { @@ -113,17 +97,4 @@ export class DropdownSelectorComponent implements AfterContentChecked, OnInit { closeOverlay() { this.overlayOpen = false } - - private getExpectedSelectionFromChoice(choice: Choice): any { - return this.selectedValueExpectedAsObject ? choice : choice.value - } - - private selectedObjecthasToBeSet(): boolean { - if (this.selectedObject === undefined) return true - return ( - (this.selectedValueExpectedAsObject - ? this.selected.value - : this.selected) !== this.selectedObject.value - ) - } }