From 39c17462c4b26ed35d86e48e45eb9238d973a9c8 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:22:11 +0300
Subject: [PATCH] Fixed #15687 | Listbox: use IconField and InputText for
 filter

---
 src/app/components/listbox/listbox.ts | 49 +++++++++++++++------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts
index 8873b611fbc..22ac5bb51de 100755
--- a/src/app/components/listbox/listbox.ts
+++ b/src/app/components/listbox/listbox.ts
@@ -35,6 +35,8 @@ import { CheckIcon } from 'primeng/icons/check';
 import { Nullable } from 'primeng/ts-helpers';
 import { ListboxChangeEvent, ListboxClickEvent, ListboxDoubleClickEvent, ListboxFilterEvent, ListboxFilterOptions, ListboxSelectAllChangeEvent } from './listbox.interface';
 import { Scroller, ScrollerModule } from 'primeng/scroller';
+import { IconFieldModule } from '../iconfield/iconfield';
+import { InputTextModule } from '../inputtext/inputtext';
 
 export const LISTBOX_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -91,26 +93,31 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                 </ng-container>
                 <ng-template #builtInFilterElement>
                     <div class="p-listbox-filter-container" *ngIf="filter">
-                        <input
-                            #filterInput
-                            type="text"
-                            class="p-listbox-filter p-inputtext p-component"
-                            role="searchbox"
-                            [value]="_filterValue() || ''"
-                            [disabled]="disabled"
-                            [attr.aria-owns]="id + '_list'"
-                            [attr.aria-activedescendant]="focusedOptionId"
-                            [attr.placeholder]="filterPlaceHolder"
-                            [attr.aria-label]="ariaFilterLabel"
-                            [tabindex]="!disabled && !focused ? tabindex : -1"
-                            (input)="onFilterChange($event)"
-                            (keydown)="onFilterKeyDown($event)"
-                            (blur)="onFilterBlur($event)"
-                        />
-                        <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
-                        <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                        </span>
+                        <p-iconField>
+                            <input
+                                #filterInput
+                                pInputText
+                                type="text"
+                                class="p-listbox-filter"
+                                role="searchbox"
+                                [value]="_filterValue() || ''"
+                                [disabled]="disabled"
+                                [attr.aria-owns]="id + '_list'"
+                                [attr.aria-activedescendant]="focusedOptionId"
+                                [attr.placeholder]="filterPlaceHolder"
+                                [attr.aria-label]="ariaFilterLabel"
+                                [tabindex]="!disabled && !focused ? tabindex : -1"
+                                (input)="onFilterChange($event)"
+                                (keydown)="onFilterKeyDown($event)"
+                                (blur)="onFilterBlur($event)"
+                            />
+                            <p-inputIcon>
+                                <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
+                                <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
+                                    <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                </span>
+                            </p-inputIcon>
+                        </p-iconField>
                     </div>
                     <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
                         {{ filterResultMessageText }}
@@ -1441,7 +1448,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
 }
 
 @NgModule({
-    imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon],
+    imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon, IconFieldModule, InputTextModule],
     exports: [Listbox, SharedModule, ScrollerModule],
     declarations: [Listbox]
 })