feat(dropdown): add inputType for filter input (#575)

allianz · May 5, 2022 · db3e732 · db3e732
1 parent 019e754
commit db3e732
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/projects/ng-aquila/src/dropdown/dropdown.html b/projects/ng-aquila/src/dropdown/dropdown.html
@@ -46,7 +46,7 @@
                 class="nx-dropdown__filter-input"
                 [class.is-filled]="!isFilterEmpty"
                 #filterInput
-                type="text"
+                [type]="filterInputType"
                 (input)="_onFilter($event)"
                 [placeholder]="filterPlaceholder"
             />

diff --git a/projects/ng-aquila/src/dropdown/dropdown.spec.ts b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
@@ -801,7 +801,25 @@ describe('NxDropdownComponent', () => {
             expect(visibleItems[0].textContent!.trim()).toBe('BMW');
         }));
 
-        it('should filter spaces', fakeAsync(() => {
+        it('should set filter input type if filterInputType is present', fakeAsync(() => {
+            createTestComponent(FilterDropdownComponent);
+            openDropdownByClick();
+            dropdownInstance.filterInputType = 'tel';
+            fixture.detectChanges();
+            const filterInput = getFilterInput();
+
+            expect(filterInput.getAttribute('type')).toBe('tel');
+        }));
+
+        it('should be text type by default for filter input', fakeAsync(() => {
+            createTestComponent(FilterDropdownComponent);
+            openDropdownByClick();
+            const filterInput = getFilterInput();
+
+            expect(filterInput.getAttribute('type')).toBe('text');
+        }));
+
+        it('should filter space', fakeAsync(() => {
             createTestComponent(FilterDropdownComponent);
             openDropdownByClick();
 

diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -94,6 +94,7 @@ export const NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER = {
     deps: [Overlay],
 };
 
+export type FilterInputType = 'text' | 'number' | 'tel' | 'search' | 'date' | 'datetime' | 'month' | 'email';
 @Component({
     selector: 'nx-dropdown',
     templateUrl: 'dropdown.html',
@@ -193,6 +194,18 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         return this._options.value;
     }
 
+    private _filterInputType: FilterInputType = 'text';
+    /**
+     * Type of filter input (default: text)
+     */
+    @Input()
+    set filterInputType(value: FilterInputType) {
+        this._filterInputType = value;
+    }
+    get filterInputType(): FilterInputType {
+        return this._filterInputType;
+    }
+
     @Input()
     get tabIndex(): number {
         return this.disabled ? -1 : this._tabIndex;