I have an autocomplete input field where I am showing the data and the user can select the data and submit it. each data has an icon attached – highlight_off which is used for deleting the data, if the user selects a date from the drop-down then a checkbox is attached to the data so that the user cannot delete it until and unless removed from the input box.
Image for reference when we populate the data –
When we select the data then this close button turns into a checkbox to show as selected data (internal functionality of angular UI library)
Now the issue is when we select the data add a word to it and remove it immediately then icon disappears neither checkbox nor the highlight_off icon is showing which seems very strange
How will we show the icon if we edit the data, the issue is when we add something extra and remove from selected data, because when we directly start removing the selected data words then the icon highlight_off is showing which is correct but if we add a word and remove from selected data then this issue arise.
Code –
HTML
<div class="tw-w-2/5">
<mat-form-field
appearance="outline"
requiredInput
class="portAutocomplete tw-w-full">
<mat-label>{{ 'COMPANY-NAME' | translate }}</mat-label>
<input
matInput
appInputRestriction
[matAutocomplete]="autoCompnay"
appTabNavigation
appExtMatAutocompleteTriggerEnforceSelection
formControlName="cCompanyName"
autocomplete="off" />
<button
type="button"
mat-icon-button
matSuffix
tabindex="-1"
(click)="clearCompanyName()"
*ngIf="pickupForm.get('cCompanyName')?.value">
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete
#autoCompnay="matAutocomplete"
(optionSelected)="updateOtherInput($event.option.value)"
[displayWith]="displayCompnayname.bind(this)">
<mat-option
*ngFor="let PickupAddress of filteredPickupAddress | async"
[value]="PickupAddress.cCompanyName">
<div class="tw-flex tw-justify-between tw-items-center">
<small class="pickup-width">{{ PickupAddress.cCompanyName | titlecase }}</small>
<button
*ngIf="!shouldHideIcon(PickupAddress.cCompanyName)"
mat-icon-button
matTooltip="Delete Pickup Details"
(click)="openDeleteConfirmationDialog(PickupAddress)"
tabindex="-1"
>
<mat-icon style="color: #D70700;">highlight_off</mat-icon>
</button>
</div>
</mat-option>
</mat-autocomplete>
<mat-error
*ngIf="pickupForm?.get('cCompanyName')?.hasError('maxlength')">
{{ 'VALIDATION.COMMON-MESSAGES.MAX-40-CHAR-LENGTH' | translate }}
</mat-error>
</mat-form-field>
</div>
TS
@ViewChild('autoCompnay') autoCompnay!: MatAutocomplete;
selectedCompanyName: string | null = null;
ngOnInit() {
//some code
}
displayCompnayname(Value: any) {
let filterValue = _.findWhere(this.listPickupAddress, {
cCompanyName: Value,
});
return !_.isUndefined(filterValue) ? filterValue.cCompanyName : '';
}
async updateOtherInput(data: any) {
this.selectedCompanyName = data;
let pickupData = this.pickupForm.value;
let filterValue = _.findWhere(this.listPickupAddress, {
cCompanyName: data,
});
let pickupFormPatchValue = await this.setRatedBookingLogic(filterValue);
this.pickupForm.patchValue(pickupFormPatchValue);
this.pickupForm.get('cContactName')?.setValue(filterValue.cContactName);
this.pickupForm.get('cAddress')?.setValue(filterValue.cAddressLine1);
if (this.cCityName === '') {
this.pickupForm.get('cCity')?.setValue(filterValue.cCityName);
}
if (this.cPostalcode === '') {
this.pickupForm.get('cPostalcode')?.setValue(filterValue.cPostalCode);
}
if (this.cState === '') {
this.pickupForm.get('cState')?.setValue(filterValue.cStateName);
}
if (this.cCountry === '') {
this.pickupForm.get('cCountry')?.setValue(filterValue.cCountryCode);
}
this.pickupForm.get('cPickupEmail')?.setValue(filterValue.cEmailAddress);
this.pickupForm.get('cPhone')?.setValue(filterValue.cContactNumber);
this.pickupForm?.get('cPickupReferenceNumber')?.reset();
this.pickupForm?.get('tPickupDate')?.reset();
this.pickupForm?.get('tPickupTime')?.reset();
this.pickupForm?.get('tPickupTimeTo')?.reset();
this.pickupForm.updateValueAndValidity();
this.pickupForm.markAllAsTouched();
this.zipCodeValidate(filterValue);
this.cdr.detectChanges();
// this.openDeleteConfirmationDialog(filterValue);
}
openDeleteConfirmationDialog(PickupAddress: any): void {
const dialogRef = this._matDialog.open(DeletePickupDialogComponent, {
width: '860px',
data: {
title: this.translationService.instantTranslate('DELETE-PICKUP-ADDRESS'),
message: this.translationService.instantTranslate('DELETE-PICKUP-CONFIRMATION'),
companyName: PickupAddress.cCompanyName,
contactPerson: PickupAddress.cContactName,
address: PickupAddress.cAddressLine1,
state: PickupAddress.cStateName,
city: PickupAddress.cCityName,
postalCode: PickupAddress.cPostalCode,
email: PickupAddress.cEmailAddress,
phone: PickupAddress.cContactNumber
},
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.deletePickupDetail(PickupAddress);
}
});
}
deletePickupDetail(PickupAddress: any): void {
this.listPickupAddress = this.listPickupAddress.filter((item: { cCompanyName: any; }) => item.cCompanyName !== PickupAddress.cCompanyName);
this.filteredPickupAddress = this.pickupForm?.get('cCompanyName')?.valueChanges.pipe(
startWith(''),
map(origin =>
origin
? this._filterPickup(this.listPickupAddress, origin)
: this.listPickupAddress && this.listPickupAddress.length
? this.listPickupAddress.slice()
: []
)
);
const observer = {
next: () => {
this.resetPickupAddress();
this.setMultiValidators();
this.pickupForm.markAllAsTouched();
},
error: (error: any) => {
console.error('Error deleting pickup detail:', error.message);
},
complete: () => {
console.log('Deletion process completed.');
}
};
this._searchService.removePickupAddress(PickupAddress).subscribe(observer);
}
shouldHideIcon(cCompanyName: string): boolean {
const companyNameInInput = this.pickupForm.get('cCompanyName')?.value;
return this.selectedCompanyName === cCompanyName && companyNameInInput && companyNameInInput.trim() !== '';
}
clearCompanyName() {
this.pickupForm.get('cCompanyName')?.setValue('');
this.selectedCompanyName = null;
if (this.autoCompnay && this.autoCompnay.options) {
this.autoCompnay.options.forEach(option => option.deselect());
}
this.pickupForm.markAsUntouched();
this.cdr.detectChanges();
}
What I am doing wrong here how do I update the icon and show the mat-icon when we add a word and remove it from selected data