From def7ad30b216eb52bec6b9bcae074fb975013082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Fri, 24 May 2024 10:09:19 +0300
Subject: [PATCH] Fixed #15686 |  Dropdown: use IconField and InputText for
 filter

---
 src/app/components/dropdown/dropdown.ts | 28 +++++++++++++++++--------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index 41408bfbd7b..b0b54af3bb2 100755
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -47,6 +47,9 @@ import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { SearchIcon } from 'primeng/icons/search';
 import { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface';
 import { Nullable } from 'primeng/ts-helpers';
+import { InputTextModule } from '../inputtext/inputtext';
+import { IconFieldModule } from '../iconfield/iconfield';
+import { InputIconModule } from '../inputicon/inputicon';
 
 export const DROPDOWN_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -245,14 +248,17 @@ export class DropdownItem {
                             </ng-container>
                             <ng-template #builtInFilterElement>
                                 <div class="p-dropdown-filter-container">
-                                    <input
+                                    <p-iconField>
+
+                                        <input
                                         #filter
+                                        pInputText
                                         type="text"
                                         role="searchbox"
                                         autocomplete="off"
                                         [value]="_filterValue() || ''"
                                         class="p-dropdown-filter p-inputtext p-component"
-                                        [ngClass]="{ 'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }"
+                                        [variant]="variant"
                                         [attr.placeholder]="filterPlaceholder"
                                         [attr.aria-owns]="id + '_list'"
                                         (input)="onFilterInputChange($event)"
@@ -260,12 +266,16 @@ export class DropdownItem {
                                         [attr.aria-activedescendant]="focusedOptionId"
                                         (keydown)="onFilterKeyDown($event)"
                                         (blur)="onFilterBlur($event)"
-                                    />
-                                    <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-dropdown-filter-icon'" />
-                                    <span *ngIf="filterIconTemplate" class="p-dropdown-filter-icon">
-                                        <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                                    </span>
-                                </div>
+                                        />
+                                        <p-inputIcon>
+
+                                            <SearchIcon *ngIf="!filterIconTemplate" />
+                                            <span *ngIf="filterIconTemplate" class="p-dropdown-filter-icon">
+                                                <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                            </span>
+                                        </p-inputIcon>
+                                    </p-iconField>
+                                    </div>
                             </ng-template>
                         </div>
                         <div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
@@ -1917,7 +1927,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 }
 
 @NgModule({
-    imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, TimesIcon, ChevronDownIcon, SearchIcon, BlankIcon, CheckIcon],
+    imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, TimesIcon, ChevronDownIcon, SearchIcon, BlankIcon, CheckIcon, InputTextModule, IconFieldModule, InputIconModule],
     exports: [Dropdown, OverlayModule, SharedModule, ScrollerModule],
     declarations: [Dropdown, DropdownItem]
 })