Pasting value may drop information without user noticing

[juuso-vaadin]

Example 1

Field with formatting NumeralFieldFormatter(",", ".", 2) will format

• 1200.049 → 1,200.04 (rounding issue)
• 1.200,00 → 1.20 (wrong symbols in input)

Example 2

Field with formatting CustomStringBlockFormatter.Builder().blocks(3, 3, 3).delimiters("-") will format

• 123 456 789 → 123- 45-6 7 (spaces taken as characters)

Example 3

Field with formatting IBANFormatter.fromIBANLength(18) will format

• GB29 NWBK 6016 1331 9268 19 → GB29 NWBK 6016 1331 92 (dropping last numbers due to limited length)

Improvement idea

As generic solution, component should recognize if inputted characters are cut out. This is mainly an issue when pasting in values. Component could also indicate if user is trying to type in a field that has already reached the max number of characters.

[juuso-vaadin]

Here's a sample for small wiggle animation that could indicate that field cannot accept input. This can be due to max limit reached or trying to enter a character that is not allowed. https://codepen.io/juuso-vaadin/pen/QWXLErW

[jcgueriaud1]

After investigation, the javascript library cleave.js doesn't give any hook or any solution to see if the value has been stripped or not.

That would require to change the javascript and that doesn't seem to be easy to do.