[text-field] Update number-field to always insert a decimal character when pressing the numpad decimal key

[Braus]

Hello everyone,

• Description of the issue
  When in the Dutch/german language you use a fractional symbol you use the comma instead of a dot. When you press the numpad decimal a dot always appears.
• Minimal reproducible example
  Pressing the numpad decimal in either a textfield or numberfield.
• Expected behavior
  I expect that when the locale is set to a certain language the numpad decimal changes to that language. For Amerika this is . for NL/GE this is , this behaviour is also common in most Microsoft Office programs. Try it out on Excel for example.
• Versions:
  Vaadin 14.0.8

I think this should be either a default or configurable option. But please share your rationale on this improvement.

[Haprog]

@Braus I'm not 100% sure what you meant about how it is behaving for you atm. (what is the actual issue) or how would you expect it to behave.

Pressing the numpad decimal in either a textfield or numberfield.

You didn't explicitly mention is this issue about a specific field (e.g. TextField or NumberField) so judging by this comment I think you meant that the issue affects all Vaadin inputs (text field, number field etc.)? Or did you only mean that this is only a problem with NumberField maybe?

I tried testing this by pressing the numpad decimal (with NumLock on) on Windows 10 and compared the behaviour with Chrome address bar, native <input type="text"> and vaadin inputs.

I have my Windows using English display language as default but I have multiple keyboard locales setup (English and Finnish, by default I use Finnish). When I have selected English keyboard locale (using Windows Language bar or keyboard shortcut Shift+Alt) then whenever I press the numpad decimal key I always get a dot "." but when I use Finnish keyboard locale I always get a comma "," in all fields (Chrome address bar, native input and all Vaadin fields). This seems to be consistent and to me this seems to be correct behaviour also in e.g. Vaadin TextField.

Only issue I noticed related to this is that if you have a keyboard locale where the default decimal separator is not a dot "." then when using NumberField or BigDecimalField pressing numpad decimal key doesn't do anything since it tries to add a comma but the input only accepts a dot as a decimal separator.

Is the actual problem you meant or did you mean something else?

I think that should be easily fixable since it seems that the numpad decimal key has it's own keycode which we can detect in JS.

So imo pressing the numpad decimal key should actually always input a decimal separator in NumberField and BigDecimalField. So even if you change keyboard locales I think it should always add the character that is configured as the decimal separator of the field.

[Haprog]

Actually now I also tested the behaviour with native <input type="number"> and that seems to behave exactly the same as Vaadin NumberField so that if I am using Finnish locale pressing numpad decimal key doesn't do anything (but using English locale it adds a dot in the input). This is at least how it works in Chrome on Windows 10. I'm not sure if the behaviour depends on OS or browser.

NumberField is internally using <input type="number"> so this behaviour is basically inherited from there. But I still think it would be a nice small enhancement to add some code in <vaadin-number-field> to handle the numpad decimal key so it always inserts a decimal character regardless of locale (at least when NumLock is on and it's not functioning as Delete; this can be detected from keyboard event).

[Braus]

Hi @Haprog Haprog,

Thanks for replying.
Good to read that you are able to reproduce it. I just tested it out with edge and firefox as well on W10. They always output the (.) instead of the locale specific character (,) in my case. My browser locale is also Dutch.

You are correct in asserting that I didn't specify the numberfield specifically. This is intentionally because I feel that all inputfields should have this behaviour.
Why? Because the numpad part of the keyboard is all about inserting numbers. if I type a String in a TextField: "I gave them 20(,)35" I would also expect the correct symbol.

I myself am using Java with OSGI so I'm not very familiar with the JS parts. But I believe the best place might be to make the KeyDownEvent (or whatever that actually gives the symbol) give back the correct symbol based on browser locale.

[Haprog]

You are correct in asserting that I didn't specify the numberfield specifically. This is intentionally because I feel that all inputfields should have this behaviour.
Why? Because the numpad part of the keyboard is all about inserting numbers. if I type a String in a TextField: "I gave them 20(,)35" I would also expect the correct symbol.

But this seems to be already working correctly for e.g. Vaadin TextField. If I am using Finnish keyboard locale and press NumPad decimal in a Vaadin TextField I get comma , (correct) and if I'm using English keyboard locale ("US keyboard" or "United States-International keyboard" from Windows settings) and press NumPad decimal then I get a dot . (correct). It works the same as in all other applications where I can input text.

If it's not working like this for you then there's probably something wrong with your settings (OS, keyboard or browser settings might be somehow configured so that the wrong character is set up as decimal separator). Vaadin inputs have no special processing for NumPad decimal key, it just receives the character as is via native <input type="text">. For me that character changes depending on keyboard locale if I change it in Windows input method settings.

I tested this on two different Windows 10 PCs (one desktop, one laptop) with two different full size USB keyboards with Finnish keyboard layout (comma printed on the NumPad decimal key) and both behaved the same way (it all depends on operating system settings for keyboard input). I tested Chrome, Firefox, Edge, no difference.

[Haprog]

You might want to check your settings at: Windows Settings / Time & Language / Language / Preferred languages.

If you have multiple languages set up check if one of them says "Default input language". Click on that language, then click Options (that appears) and check that the Keyboards section shows the correct keyboard (for me that is "Finnish - QWERTY"), or if not then change it by clicking "Add a keyboard" and after adding the correct one you may remove the incorrect one if you want.

On the previous Language page in the settings there's also the link "Choose an input method to always use as default" by following that there's also an option "Let me use a different input method for each app windows" which may affect things if you have it enabled (you may be using different keyboard locales in different apps so you may have it wrong for you browser for example).

It might be that you're seeing the correct input language being used but you might have an incorrect keyboard locale selected for that input method.

If you have more than one language/keyboard option set up I suggest to enable the language bar so you can always see from the right side of the Windows task bar which language is being used for the active Window and it's also easy to change between them. You might sometimes accidentally switch between input methods by pressing Shirt+Alt keyboard shortcut.

[Braus]

Hi @Haprog

Thanks for looking into it again. If I put my keyboard locale on a different language it indeed gives the correct character.

The thing is the application that I build and envision gives users the freedom to select a language locale. Then I imagine that the application works in that language not the keyboard setting. As example all the dutch people I know use the english keyboard setting because that's just the way it is for some reason. When they use applications like Office they use the numpad and it gives a comma regardless of the keyboard layout. These users expect that when they use other applications that we build that it works more or less the same. Do the people in Finland for example always use the Finnish keyboard layout or the english? If they all use a finnish keyboard I guess this issue is less relatable.

To be honest I'm not very familiair with the default keyboard settings in the worlds. So it might be a dutch specific issue..

[Haprog]

I understand the need as an app developer to be able to set in which language your app is shown in and what formats it uses and that is good, but as as end user who may have any kind of keyboard (or other input device) I expect that my keyboard works as I have configured it when inputting text.

It is standard that the input method and keyboard layout is configured on user operating system level. In an application you can of course override default functionality based on specific key codes if you have a special use case that needs it.

But currently with Vaadin input fields the behaviour (related to e.g. the NumPad decimal key) seems to be consistent with standard behaviour, so it works as intended in the same way as regular/native inputs in Windows apps and web sites by default.

I'm however not familiar with Dutch keyboards or locale(s) if there's something special about them comparing to other locales.

When they use applications like Office they use the numpad and it gives a comma regardless of the keyboard layout.

It sounds a bit weird to me if Microsoft Office behaves differently for you in this case (unless it has been explicitly configured to always use a different keyboard locale) compared to web site inputs or other application inputs. Unfortunately I don't have a license for Microsoft Office to test with.

Do the people in Finland for example always use the Finnish keyboard layout or the english? If they all use a finnish keyboard I guess this issue is less relatable.

In Finland generally people use the same Finnish keyboard layout. Afaik it's the same layout used in Sweden (and maybe Norway?). Only this keyboard layout is generally available in stores if buying a keyboard. Though of course some people who have moved to Finland from elsewhere might prefer and use another keyboard layout like US English or US International.

Conclusion

I think there is no related bug in input fields in this repository, but we could do an enhancement to NumberField and BigDecimalField so that they would always insert a decimal character when you press the NumPad decimal key (since you can only input numbers in them anyway).

In Text fields we should not do any changes to this since then it would not work correctly anymore at least with Finnish locale etc. if inputting text since the text field doesn't know if you are typing a number or other text (should it use comma or dot or what). And if you are typing a number with NumPad then it should be according to your locale (which should already work right as this is defined by the OS keyboard settings)