ngx-mask icon indicating copy to clipboard operation
ngx-mask copied to clipboard

Clear input in Firefox with backspace using a mask not working correctly

Open L-VE opened this issue 3 years ago β€’ 0 comments

🐞 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.

demo

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)

L-VE avatar May 09 '22 09:05 L-VE