search

trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
517 stars 87 forks source link

Inserting a '.' (dot) or ','(comma) in a text field with type="number" clears the entire input field dependent on locale #1887

Open RikEskes opened 5 years ago

RikEskes commented 5 years ago

Describe the bug When inserting a value in a text field with its type set to number, one is able to use either the ',' (comma ) sign in the field or the '.' (dot) sign. This selection seems dependent on the locale settings of one's browser. However, I expect to be able to use both.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/text-field-demo/examples
  2. Scroll down to either the 'Numeric with ngModel Form' field, or the 'Numeric with ngModel' field.
  3. Type one or more numbers, and afterwards try to type a '.' (dot). Now see that the entire field is emptied. When this does work, please try the same with a ',' (comma).

Expected behavior I expect to have a dot (or comma) inserted into the field instead of having the field cleared. When browsers limit this behaviour to only on of the two signs dependent on the locale I at least expect to not have the input field cleared.

What Angular MDC version are you using? 1.0.3

What OS are you using?: Windows, Android and iOS.

What browser(s) is this bug affecting?: Chrome, Safari and Firefox

manklu commented 4 years ago

@trimox

Problem is that the browser returns an empty string for invalid values.

The setter coerce the empty string to a null value

https://github.com/trimox/angular-mdc-web/blob/b5abbe4070d5416049dd5812091d22fde6164bf9/packages/textfield/text-field.ts#L572

and then set it as the new value for the input element

https://github.com/trimox/angular-mdc-web/blob/b5abbe4070d5416049dd5812091d22fde6164bf9/packages/textfield/text-field.ts#L582-L584

AFAIK Angular has no mechanism to handle html validation errors gracefully.