Angular: Primeng InputNumber, Calendar styling errors in Google Chrome

In an Angular project, using primeng form input, specificity in chrome browser, I am getting this weird black circle inside primeng number inputs.

<p-inputNumber
mode="decimal"
[min]="0"
[minFractionDigits]="2"
[maxFractionDigits]="2"
id="rentPerAnnum"
inputId="minmaxfraction"
formControlName="parkingPrice"
(onBlur)="
formatToDouble(leaseDetailsGroup, 'parkingPrice')
"
class="w-8"
/>



and A white circle in this element which is not in the background.
enter image description here

Empty date fields for the calendar.

<p-calendar
[readonlyInput]="false"
[dateFormat]="'dd-mm-yy'"
formControlName="registeredDate"
id="registeredDate"
inputId="registeredDate"
[iconDisplay]="'input'"
[showIcon]="true"
placeholder="Select"
styleClass="w-full"
(onSelect)="onDateSelect($event, 'registeredDate')"
></p-calendar>




I checked on other browsers like Firefox and ran the code on other laptops, it works just fine, I am open to any suggestions.

Google chrome: Version 130.0.6723.116 (Official Build) (64-bit)

OS: Ubuntu 22.04.5 LTS

Continue reading...