p-inputmask does not update "p-filled" class after doing a FormGroup.patchValue() #17527
Open
1 of 4 tasks
Labels
Status: Needs Triage
Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Describe the bug
Using .patchValue() on a
<input pInputText formControlName="myControl" />
works as expected. It inserts a "p-filled" class in the DOM, which allows FloatLabel to work correctly.However, this expected behavior does NOT work with
<p-inputmask>
. Since the "p-filled" class is not inserted on the input element's classList, the FloatLabel overlaps the value.HTML:
TS:
Result:
Workaround:
Workaround result:
Pull Request Link
No response
Reason for not contributing a PR
Other Reason
No response
Reproducer
https://stackblitz.com/edit/github-5jz2m89t-m7nk9x27?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
Environment
develop, check the reproducer link
Angular version
19.0.6
PrimeNG version
v19
Node version
23.6.1
Browser(s)
No response
Steps to reproduce the behavior
Open StackBlitz: https://stackblitz.com/edit/github-5jz2m89t-m7nk9x27?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
Click the "Patch Value" button. This will fire a .patchValue() on the form and update the value in the p-inputmask to "77777".
Notice the label does not move to the "on" position, instead overlays the value.
This is because the inputmask has not updated it's "filled" state.
Open the DevTools, manually add the class "p-filled" to the input, notice that the issue is fixed.
Expected behavior
inputmask should update its "filled" state when a .patchValue() is sent from a Reactive Form.
FloatLabel should move to the "on" position once there is a value inserted.
The text was updated successfully, but these errors were encountered: