unable to clear the selection for prime ng drop down

Question

I am using prime ng drop down inside a table as follows

<div class="grid" *ngIf="timeSheetControls.length > 0">
        <div class="col-12">
            <p-table [value]="timeSheetControls.controls" [scrollable]="true"
                [resizableColumns]="true" scrollHeight="430px">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Day</th>
                        <th>Shift</th>
                        <th>Client</th>
                        <th>Project</th>
                        <th>Task</th>
                        <th>Hours</th>
                        <th>Remarks</th>
                    </tr>
                </ng-template>

                <ng-template pTemplate="body" let-control let-i="rowIndex">
                    <tr [formGroup]="control">
                        <td><label>{{ formatDate(control.get('date').value) }}</label></td>
                        <td>
                            <p-dropdown [options]="employeeShift" formControlName="shift" [showClear]="true"
                                appendTo="body" placeholder="Select shift"></p-dropdown>
                        </td>
                        <td><input pInputText formControlName="client" placeholder="Client"></td>
                        <td><input pInputText formControlName="project" placeholder="Project"></td>
                        <td><input pInputText formControlName="task" placeholder="Task"></td>
                        <td><input style="width: 4vw;" pInputText formControlName="hours" placeholder="Hours"></td>
                        <td><input pInputText formControlName="remarks" placeholder="Remarks"></td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>

I am able to see the clear icon but when I click on that I am unable to perform any operation on it <p-dropdown [options]="employeeShift" formControlName="shift" [showClear]="true" appendTo="body" placeholder="Select shift"></p-dropdown>

My options for the drop down are as follows

employeeShift: any[] = ['6 AM - 3 PM', '2 PM - 11 PM', '6 PM - 3 AM'];

When I have this in a different page it works but not inside the table. When I click on the clear icon it is bringing me the selection instead of clearing the data

I tried changing the padding but no luck

Answer 1

I am unable to replicate the issue on stackblitz, kindly validate the below sample code, if you are able to find the issue!

If not able to find, please share back the stackblitz with the issue replicated for debugging!

html

<div class="grid" *ngIf="timeSheetControls.length > 0">
  <div class="col-12">
    <p-table
      [value]="timeSheetControls.controls"
      [scrollable]="true"
      [resizableColumns]="true"
      scrollHeight="430px"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>Day</th>
          <th>Shift</th>
          <th>Client</th>
          <th>Project</th>
          <th>Task</th>
          <th>Hours</th>
          <th>Remarks</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-control let-i="rowIndex">
        <tr [formGroup]="control">
          <td><label>{{ control.get('date').value }}</label></td>
          <td>
            <p-dropdown
              [options]="employeeShift"
              formControlName="shift"
              [showClear]="true"
              appendTo="body"
              placeholder="Select shift"
            ></p-dropdown>
          </td>
          <td>
            <input pInputText formControlName="client" placeholder="Client" />
          </td>
          <td>
            <input pInputText formControlName="project" placeholder="Project" />
          </td>
          <td>
            <input pInputText formControlName="task" placeholder="Task" />
          </td>
          <td>
            <input
              style="width: 4vw"
              pInputText
              formControlName="hours"
              placeholder="Hours"
            />
          </td>
          <td>
            <input pInputText formControlName="remarks" placeholder="Remarks" />
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

ts

import { Component, OnInit } from '@angular/core';
import { Product } from '../../domain/product';
import { ProductService } from '../../service/productservice';
import { FormArray, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'table-basic-demo',
  templateUrl: 'table-basic-demo.html',
})
export class TableBasicDemo implements OnInit {
  timeSheetControls = new FormArray([]);
  employeeShift: any[] = ['6 AM - 3 PM', '2 PM - 11 PM', '6 PM - 3 AM'];

  constructor(private productService: ProductService) {}

  ngOnInit() {
    new Array(15).fill(null).forEach(() => {
      const formGroup = new FormGroup({
        date: new FormControl(new Date()),
        shift: new FormControl('6 AM - 3 PM'),
        client: new FormControl('test'),
        project: new FormControl('test'),
        task: new FormControl('test'),
        hours: new FormControl('test'),
        remarks: new FormControl('test'),
      });
      this.timeSheetControls.push(formGroup);
    });
  }
}

stackblitz