Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
fix(combobox): Fixes an issue with input being reset if selection is …
Browse files Browse the repository at this point in the history 
…null
  • Loading branch information
@moterink @tomheller
moterink authored and tomheller committed Feb 22, 2022
1 parent 4034e96 commit eb0f8f9
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 13 deletions.
25 changes: 13 additions & 12 deletions libs/barista-components/experimental/combobox/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,19 @@ FormsModule (NgModel) and ReactiveFormsModule (FormControl, FormGroup, etc.).

## DtCombobox Inputs

| Name | Type | Default Value | Description |
| ----------------- | ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | `''` | The ID for the combobox. |
| `value` | `T \| null` | `null` | The currently selected value in the combobox. |
| `loading` | `boolean` | `false` | When set to true, a loading indicator is shown to show to the user that data is currently being loaded/filtered. |
| `required` | `boolean` | `false` | Whether the control is required. |
| `panelClass` | `string` | `''` | An arbitrary class name that is added to the combobox dropdown. |
| `placeholder` | `string \| undefined` | `undefined` | A placeholder text for the input field. |
| `displayWith` | `(value: T) => string` | (value: T) =>`\${value}` | A function returning a display name for a given object that represents an option from the combobox. |
| `aria-label` | `string` | `undefined` | Aria label of the select. |
| `aria-labelledby` | `string` | `undefined` | Input that can be used to specify the `aria-labelledby` attribute. |
| `focused` | `boolean` | `false` | Whether the control is focused. |
| Name | Type | Default Value | Description |
| ----------------- | --------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | `''` | The ID for the combobox. |
| `value` | `T \| null` | `null` | The currently selected value in the combobox. |
| `loading` | `boolean` | `false` | When set to true, a loading indicator is shown to show to the user that data is currently being loaded/filtered. |
| `required` | `boolean` | `false` | Whether the control is required. |
| `panelClass` | `string` | `''` | An arbitrary class name that is added to the combobox dropdown. |
| `placeholder` | `string \| undefined` | `undefined` | A placeholder text for the input field. |
| `displayWith` | `(value: T) => string` | `(value: T) => ${value}` | A function returning a display name for a given object that represents an option from the combobox. |
| `compareWith` | `(v1: T, v2: T) => boolean` | `v1 === v2` | Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned. This function is needed to match new options that come in at runtime with the value that was stored previously. Defaults to value equality. |
| `aria-label` | `string` | `undefined` | Aria label of the select. |
| `aria-labelledby` | `string` | `undefined` | Input that can be used to specify the `aria-labelledby` attribute. |
| `focused` | `boolean` | `false` | Whether the control is focused. |

## DtOption inputs

Expand Down
20 changes: 20 additions & 0 deletions libs/barista-components/experimental/combobox/src/combobox.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
fakeAsync,
inject,
flush,
tick,
} from '@angular/core/testing';
import {
Component,
Expand Down Expand Up @@ -157,6 +158,25 @@ describe('Combobox', () => {
fixture.detectChanges();
expect(input.value).toBe('Value 2');
}));

it('should emit a filterChange event when the input value changes', fakeAsync(() => {
fixture.componentInstance.setOptions();
fixture.detectChanges();
focusInput(input);

jest.spyOn(combobox.filterChange, 'emit');

input.value = 'espresso';
dispatchFakeEvent(input, 'input');

// Wait for debounce
tick(200);

expect(combobox.filterChange.emit).toHaveBeenCalledWith({
filter: 'espresso',
isResetEvent: false,
});
}));
});

describe('inside of a form group', () => {
Expand Down
6 changes: 5 additions & 1 deletion libs/barista-components/experimental/combobox/src/combobox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -638,7 +638,11 @@ export class DtCombobox<T>
for (const selected of this._selectionModel.selected) {
this._selectionModel.deselect(selected);
}
this._writeValue();
// Only write value if the user has not entered anything yet,
// otherwise this would immediately clear their input anytime they enter something
if (this._searchInput.nativeElement.value === '') {
this._writeValue();
}
this._changeDetectorRef.markForCheck();
return;
}
Expand Down

0 comments on commit eb0f8f9

Please sign in to comment.