feat(combo): filer/custom value placeholder, i18n; filterable->disableFiltering (#14408)

MonikaKirkova · web-flow · commit d6e7b0e74fd5 · 2024-10-15T19:26:28.000+03:00
Change search placeholder depending on filtering functionality being enabled
or change text to reflect custom value can be added if that option is on.
Both placeholder texts localized from the combo resource strings. Rename
`filterable` to `disableFiltering` &amp; deprecate `filteringOptions.filterable`.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -96,6 +96,11 @@ For Firefox users, we provide limited scrollbar styling options through the foll
     - **Behavioral Changes** - the `keyboardSupport` input property now defaults to `false`.
     - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`. 
 
+- `IgxCombo`:
+    - **Breaking Change** The deprecated `filterable` property is replaced with `disableFiltering`.
+    - The dropdown search field placeholder is now part of the Combo's localization resources. It now also uses two resource values depending on whether filtering is active, e.g. in the default `en` locale it remains `'Enter a Search Term'`, but changes to `'Add Item'` when `disableFiltering` and `allowCustomValues` are set to true. For that reason, the existing `searchPlaceholder` input is also **deprecated** in favor of the resources.
+    - **Deprecation** - `filterable` from the `filteringOptions` has been deprecated in favor of `disableFiltering`.
+
 - `IgxBadge`
     - **Breaking Change** The `$border-width` property has been removed from the badge theme.
     - New outlined variant of the badge component has been added. Users can switch to `outlined` by adding the newly created `outlined` property to a badge.
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsBG_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Списъкът е празен',
+    igx_combo_filter_search_placeholder: 'Въведете термин за търсене',
     igx_combo_addCustomValues_placeholder: 'Добавяне на елемент',
     igx_combo_clearItems_placeholder: 'Изчистване на избора'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsCS_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Seznam je prázdný',
+    igx_combo_filter_search_placeholder: 'Zadejte hledaný výraz',
     igx_combo_addCustomValues_placeholder: 'Přidat položku',
     igx_combo_clearItems_placeholder: 'Vymazat výběr'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsDA_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Listen er tom',
+    igx_combo_filter_search_placeholder: 'Indtast en søgeterm',
     igx_combo_addCustomValues_placeholder: 'Tilføj element',
     igx_combo_clearItems_placeholder: 'Ryd markering'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsDE_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Die Liste ist leer',
+    igx_combo_filter_search_placeholder: 'Suchbegriff eingeben',
     igx_combo_addCustomValues_placeholder: 'Element hinzufügen',
     igx_combo_clearItems_placeholder: 'Auswahl löschen'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsES_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'La lista está vacía',
+    igx_combo_filter_search_placeholder: 'Escriba un término de búsqueda',
     igx_combo_addCustomValues_placeholder: 'Agregar elemento',
     igx_combo_clearItems_placeholder: 'Borrar selección'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsFR_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'La liste est vide',
+    igx_combo_filter_search_placeholder: 'Entrez un terme de recherche',
     igx_combo_addCustomValues_placeholder: 'Ajouter un élément',
     igx_combo_clearItems_placeholder: 'Effacer la sélection'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsHU_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Üres a lista',
+    igx_combo_filter_search_placeholder: 'Írjon be egy keresési kifejezést',
     igx_combo_addCustomValues_placeholder: 'Elem hozzáadása',
     igx_combo_clearItems_placeholder: 'Kiválasztás törlése'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsIT_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'L\'elenco è vuoto',
+    igx_combo_filter_search_placeholder: 'Immettere il testo di ricerca',
     igx_combo_addCustomValues_placeholder: 'Aggiungi elemento',
     igx_combo_clearItems_placeholder: 'Cancella selezione'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsJA_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'リストが空です',
+    igx_combo_filter_search_placeholder: '検索条件の入力',
     igx_combo_addCustomValues_placeholder: '項目の追加',
     igx_combo_clearItems_placeholder: '選択のクリア'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsKO_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: '목록이 비어 있음',
+    igx_combo_filter_search_placeholder: '검색어 입력',
     igx_combo_addCustomValues_placeholder: '항목 추가',
     igx_combo_clearItems_placeholder: '선택 지우기'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsNB_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Listen er tom',
+    igx_combo_filter_search_placeholder: 'Skriv inn søkeord',
     igx_combo_addCustomValues_placeholder: 'Legg til element',
     igx_combo_clearItems_placeholder: 'Fjern valg'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsNL_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'De lijst is leeg',
+    igx_combo_filter_search_placeholder: 'Typ een zoekterm',
     igx_combo_addCustomValues_placeholder: 'Item toevoegen',
     igx_combo_clearItems_placeholder: 'Selectie wissen'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsPL_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Lista jest pusta',
+    igx_combo_filter_search_placeholder: 'Wprowadź tekst wyszukiwania',
     igx_combo_addCustomValues_placeholder: 'Dodaj element',
     igx_combo_clearItems_placeholder: 'Wyczyść wybór'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsPT_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'A lista está vazia',
+    igx_combo_filter_search_placeholder: 'Digite um termo de pesquisa',
     igx_combo_addCustomValues_placeholder: 'Adicionar item',
     igx_combo_clearItems_placeholder: 'Limpar seleção'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsRO_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Lista este goală',
+    igx_combo_filter_search_placeholder: 'Introduceți termenul de căutare',
     igx_combo_addCustomValues_placeholder: 'Adăugați element',
     igx_combo_clearItems_placeholder: 'Ștergeți selecția'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsSV_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Listan är tom',
+    igx_combo_filter_search_placeholder: 'Ange sökterm',
     igx_combo_addCustomValues_placeholder: 'Lägg till objekt',
     igx_combo_clearItems_placeholder: 'Rensa urval'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsTR_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: 'Liste boş',
+    igx_combo_filter_search_placeholder: 'Arama terimi girin',
     igx_combo_addCustomValues_placeholder: 'Öğe ekle',
     igx_combo_clearItems_placeholder: 'Seçimi temizle'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsZHHANS_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: '列表为空',
+    igx_combo_filter_search_placeholder: '输入搜索字符串',
     igx_combo_addCustomValues_placeholder: '添加项目',
     igx_combo_clearItems_placeholder: '清除选择'
 };
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/combo-resources.ts
@@ -3,6 +3,7 @@ import { IComboResourceStrings } from 'igniteui-angular';
 // exported below as re-cast to create declaration type with expanded properties
 const ComboResourceStringsZHHANT_: ExpandRequire<IComboResourceStrings> = {
     igx_combo_empty_message: '清單是空的',
+    igx_combo_filter_search_placeholder: '輸入搜尋字串',
     igx_combo_addCustomValues_placeholder: '新增項目',
     igx_combo_clearItems_placeholder: '清除選擇'
 };
diff --git a/projects/igniteui-angular/migrations/update-18_2_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-18_2_0/changes/inputs.json
@@ -0,0 +1,14 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "filterable",
+            "replaceWith": "disableFiltering",
+            "valueTransform": "filterable_to_disableFiltering",
+            "owner": {
+                "selector": "igx-combo",
+                "type": "component"
+            }
+        }
+    ]
+}
diff --git a/projects/igniteui-angular/migrations/update-18_2_0/index.spec.ts b/projects/igniteui-angular/migrations/update-18_2_0/index.spec.ts
@@ -67,6 +67,26 @@ describe(`Update to ${version}`, () => {
         expect(tree.readContent('/testSrc/appPrefix/component/grid-test.component.ts')).toEqual(expectedContent);
     });
 
+    it('should remove property `filterable` from Combo component', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-combo [filterable]="false"></igx-combo>
+        <igx-combo filterable="true"></igx-combo>
+        <igx-combo [filterable]="myProp"></igx-combo>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-combo [disableFiltering]="true"></igx-combo>
+        <igx-combo [disableFiltering]="false"></igx-combo>
+        <igx-combo [disableFiltering]="!(myProp)"></igx-combo>
+        `
+        );
+    });
+
     it('should migrate scrollbar theme', async () => {
         appTree.create(
             `/testSrc/appPrefix/component/test.component.scss`,
diff --git a/projects/igniteui-angular/migrations/update-18_2_0/index.ts b/projects/igniteui-angular/migrations/update-18_2_0/index.ts
@@ -3,7 +3,7 @@ import type {
     SchematicContext,
     Tree
 } from '@angular-devkit/schematics';
-import { UpdateChanges } from '../common/UpdateChanges';
+import { BoundPropertyObject, InputPropertyType, UpdateChanges } from '../common/UpdateChanges';
 
 const version = '18.2.0';
 
@@ -47,5 +47,21 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
         });
     }
 
+    update.addValueTransform('filterable_to_disableFiltering', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.EVAL;
+
+        switch (args.value) {
+            case 'true':
+                args.value = 'false';
+                break;
+            case 'false':
+                args.value = 'true';
+                break;
+            default:
+                args.value = `!(${args.value})`;
+        }
+    });
+
     update.applyChanges();
 };
+
diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts
@@ -108,8 +108,11 @@ export const enum DataTypes {
 export interface IComboFilteringOptions {
     /** Defines filtering case-sensitivity */
     caseSensitive?: boolean;
-    /** Defines whether filtering is allowed */
-    filterable: boolean;
+    /**
+     * Defines whether filtering is allowed
+     * @deprecated in version 18.2.0. Use the `disableFiltering` property instead.
+    */
+    filterable?: boolean;
     /** Defines optional key to filter against complex list items. Default to displayKey if provided.*/
     filteringKey?: string;
 }
@@ -971,7 +974,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     private _overlaySettings: OverlaySettings;
     private _groupSortingDirection: SortingDirection = SortingDirection.Asc;
     private _filteringOptions: IComboFilteringOptions;
-    private _defaultFilteringOptions: IComboFilteringOptions = { caseSensitive: false, filterable: true };
+    private _defaultFilteringOptions: IComboFilteringOptions = { caseSensitive: false };
 
     public abstract dropdown: IgxComboDropDownComponent;
     public abstract selectionChanging: EventEmitter<any>;
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -39,7 +39,7 @@
         <igx-input-group *ngIf="displaySearchInput">
             <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
-                   (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
+                   (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"
                    aria-autocomplete="list" role="searchbox" aria-label="search"/>
             <igx-suffix *ngIf="showSearchCaseIcon" (click)="toggleCaseSensitive()">
                 <span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
@@ -59,7 +59,7 @@
         [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
         [attr.aria-activedescendant]="activeDescendant">
         <igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
-            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction
+            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering
             | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item?.isHeader" [index]="rowIndex" [role]="item?.isHeader? 'group' : 'option'">
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
diff --git a/projects/igniteui-angular/src/lib/core/i18n/combo-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/combo-resources.ts
diff --git a/src/app/combo/combo.sample.html b/src/app/combo/combo.sample.html
diff --git a/src/app/combo/combo.sample.ts b/src/app/combo/combo.sample.ts
