From 029f15413a0b6a2f985fb8e6ffb989281885b43c Mon Sep 17 00:00:00 2001
From: sambhu <sambhu.ss@pega.com>
Date: Mon, 5 Oct 2026 18:52:54 +0530
Subject: [PATCH 1/2] feat(dropdown): use authored placeholder via mat-select
 with reset option

---
 .../field/dropdown/dropdown.component.html    |  2 ++
 .../field/dropdown/dropdown.component.ts      | 31 +++++--------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.html b/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.html
index cfcc30f1e..7693e47cc 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.html
+++ b/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.html
@@ -11,12 +11,14 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-select
           [value]="value$"
+          [placeholder]="placeholderText"
           [required]="bRequired$"
           [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
           [formControl]="fieldControl"
         >
+          <mat-option>{{ placeholderText }}</mat-option>
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ getLocalizedOptionValue(opt) }}
           </mat-option>
diff --git a/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts b/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts
index aabd1fe71..bc5a1e9fb 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts
+++ b/packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts
@@ -89,11 +89,12 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  placeholderText = '';
 
   set options(options: IOption[]) {
     this.options$ = options;
     if (this.displayMode$) {
-      this.value$ = this.value$ === 'Select' ? '' : this.options$?.find(option => option.key === this.value$)?.value || this.value$;
+      this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
       this.localizedValue = this.pConn$.getLocalizedValue(
         this.value$,
         this.localePath,
@@ -124,20 +125,15 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
     const { value, fieldMetadata, datasource } = configProps;
 
     this.value$ = value;
+    this.placeholderText = this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '');
 
     if (!isEqual(datasource, this.theDatasource)) {
       // inbound datasource is different, so update theDatasource
       this.theDatasource = datasource || null;
     }
 
-    if (this.value$ === '' && !this.bReadonly$) {
-      this.value$ = 'Select';
-    }
-
     if (this.theDatasource) {
-      const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-      optionsList?.unshift(this.getPlaceholderOption());
-      this.options = optionsList;
+      this.options = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
@@ -224,32 +220,21 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
             };
             optionsData.push(obj);
           });
-          optionsData?.unshift(this.getPlaceholderOption());
           this.options = optionsData;
         });
       });
   }
 
-  // Uses the authored placeholder, falling back to 'Select...' when none is authored
-  private getPlaceholderOption(): IOption {
-    return { key: 'Select', value: this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '') };
-  }
-
-  isSelected(buttonValue: string): boolean {
-    return this.value$ === buttonValue;
-  }
-
   fieldOnChange(event: any) {
-    if (event?.value === 'Select') {
-      event.value = '';
-    }
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
+    // The reset option has no value; Pega expects '' for a cleared field
+    const value = event.value ?? '';
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
 
     this.pConn$.clearErrorMessages({
       property: this.propName
     });
     if (this.onRecordChange) {
-      this.onRecordChange.emit(event.value);
+      this.onRecordChange.emit(value);
     }
   }
 

From 377dccbb3ca78446b85dad1674b848174c3e581e Mon Sep 17 00:00:00 2001
From: sambhu <sambhu.ss@pega.com>
Date: Mon, 5 Oct 2026 19:06:16 +0530
Subject: [PATCH 2/2] docs(changelog): add dropdown placeholder entry for
 pr-616

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40a5ff2f0..33f1098fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,8 @@
     * Github: [PR-594](https://github.com/pegasystems/angular-sdk-components/pull/594)
 *   **Fixed an issue where column header labels in the SimpleTableManual and ListView table were not localized.**
     * Github: [PR-603](https://github.com/pegasystems/angular-sdk-components/pull/603)
+*   **Dropdown placeholder now uses the native Material placeholder, with an option to clear the selection.**
+    * Github: [PR-616](https://github.com/pegasystems/angular-sdk-components/pull/616)
 
 ### **Bug fixes**
 *   **Fixed DataReference not making an api call on state change.**