From 0a717ac2191541bc470825c3af3eb996c1380c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Tue, 27 Feb 2024 11:26:23 +0300
Subject: [PATCH] Refactor

---
 .../showcase/doc/dropdown/customfilterdoc.ts  |  6 +++---
 .../showcase/pages/dropdown/dropdowndemo.ts   | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/showcase/doc/dropdown/customfilterdoc.ts b/src/app/showcase/doc/dropdown/customfilterdoc.ts
index b13c3a37683..68a4fa07889 100644
--- a/src/app/showcase/doc/dropdown/customfilterdoc.ts
+++ b/src/app/showcase/doc/dropdown/customfilterdoc.ts
@@ -11,7 +11,7 @@ interface City {
     selector: 'dropdown-custom-filter-demo',
     template: `
         <app-docsectiontext>
-            <p>A custom filter dropdown component can be created using a <i>filter template.</i></p>
+            <p>Custom filter can be applied with the <i>filterTemplate</i>.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
@@ -73,7 +73,7 @@ export class CustomFilterDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
+        basic: `<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" styleClass="w-20rem">
         <ng-template pTemplate="filter" let-options="options">
             <div class="flex gap-1">
                 <div class="p-inputgroup" (click)="$event.stopPropagation()">
@@ -98,7 +98,7 @@ export class CustomFilterDoc implements OnInit {
 </p-dropdown>`,
 
         html: `<div class="card flex justify-content-center">
-<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
+<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" styleClass="w-20rem">
     <ng-template pTemplate="filter" let-options="options">
         <div class="flex gap-1">
             <div class="p-inputgroup" (click)="$event.stopPropagation()">
diff --git a/src/app/showcase/pages/dropdown/dropdowndemo.ts b/src/app/showcase/pages/dropdown/dropdowndemo.ts
index 3bf1b9c30dc..b14331b1a96 100755
--- a/src/app/showcase/pages/dropdown/dropdowndemo.ts
+++ b/src/app/showcase/pages/dropdown/dropdowndemo.ts
@@ -54,13 +54,20 @@ export class DropdownDemo {
         {
             id: 'filter',
             label: 'Filter',
-            component: FilterDoc
-        },
-        {
-            id: 'customfilter',
-            label: 'Custom Filter',
-            component: CustomFilterDoc
+            children: [
+                {
+                    id: 'filterbasic',
+                    label: 'Basic',
+                    component: FilterDoc
+                },
+                {
+                    id: 'customfilter',
+                    label: 'Custom Filter',
+                    component: CustomFilterDoc
+                }
+            ]
         },
+
         {
             id: 'virtualscroll',
             label: 'Virtual Scroll',