ngx-mask
ngx-mask copied to clipboard
Clear input in Firefox with backspace using a mask not working correctly
π bug report
Description
When selecting the value in an input field using a mask and try to clear it with backspace, the value in the input is not cleared until you enter backspace again.
π¬ Minimal Reproduction
I created a project in stackblitz to reproduce the issue: https://stackblitz.com/edit/angular-ivy-pbczej?file=src/app/app.component.ts
I have an input whose validation errors are shown via a separate custom component.
The input has a mask 000 with a min validator (min 777), so you can only enter a number with 3 digits with a min of 777.
A validation error must be show when the input is invalid and has been touched.
Now when you enter '444' en leave the input and try to select the value and use backspace to clear the value, it's doesn't clear the input value. The formcontrol value is cleared apparently but the value of the input itself is not. So you have to use backspace again to clear the value.

I can only reproduce this in firefox, if the conditions to show validation errors are put inside a custom reusable component and it's using the control.invalid property. I don't see this issue occurring in chrome or when I remove the control.invalid condition in the fieldErrorComponent.
π₯ Exception or Error
/
π Your Environment
Angular Version:
Angular CLI: 13.3.5
Node: 16.13.2
Package Manager: yarn 1.22.17
OS: linux x64
Using ngxmask version 13.1.1,
Anything else relevant?
Firefox 99.0 (64-bit)