Writing numbers with a "dot" as decimal point using input type="Number" clears the input

[veith]

Bug Description

While entering a decimal number using a "dot" as a separator the input field gets empty in chrome and in safari it triggers a InvalidStateError The input element's type ('number') does not support selection.

This makes the Input element useless for countries which uses the "dot" as separator.

Expected Behavior

Allow entering numbers with dot as a decimal point, like in 1.7.1 and before

Steps to Reproduce

1. Set your browser to a locale which uses "dot" as decimal point like Switzerland, or one of this list
2. Enter a digit followed by a "dot"

Isolated Example

CodeSandbox

Context

• UI5 Web Components version: 1.8.0
• OS/Platform: MacOs
• Browser: Chrome, Safari
• Affected component: Input

Priority

• [ ] Low
• [ ] Medium
• [x] High
• [ ] Very High

Note: As a user you can use a comma to enter a number, but this feels "strange"

[TeodorTaushanov]

Hi @veith,

This look like browser native language specific behavior.

How does the standard HTML input element work at your computer: https://codesandbox.io/s/ui5-webcomponents-forked-jb7jxi

Best, Teo

[veith]

The native input elements are working as expected.

[veith]

UI5 versions <= 1.7.1 are also working as expected.

[veith]

On Android the keyboard only allow to enter "Number" types only with ..
It is not possible to enter a decimal number on tablets with ui5 >= 1.8.0 having a swiss local.

[veith]

UI5 had this problem before,

https://github.com/SAP/ui5-webcomponents/issues/1675

[maltenorstroem]

Hi all, I can see the same behaviour on a Google Pixel 6, Android 13 with Chrome 107.0.5304.105. It is not possible to enter decimal places with a dot (German/Swiss keyboard layout). The field is emptied when the decimal point is entered. (Comma as decimal "point" works)

[MarcOmlin]

Hi all,

I can see the same behaviour and reproduced this error on my Mac.

OS: macOS Big Sur Version 11.6.8 MacBook Pro (Retina, 15-inch, Mid 2014)

Google-Chrome Version: Google Chrome Chrome ist auf dem neuesten Stand Version 107.0.5304.110 (Offizieller Build) (x86_64)

Test-Case (EN) OS-Language set to English:

TEST_EN_0: Open url: https://codesandbox.io/s/ui5-webcomponents-forked-biwthg?file=/src/index.js

TEST_EN_1: Type 1

TEST_EN_1Dot: after 1 was Typed Type a . (Dot) --> No Issue 1. is still in the inputbox.

Test-Case (DECH) OS-Language set to Detusch (Deutsch (Schweiz)):

TEST_DECH_0: Open url: https://codesandbox.io/s/ui5-webcomponents-forked-biwthg?file=/src/index.js Here what u can see the default representation of 1.5 defined in the second input-box is 1,5 on the screen. <ui5-input type="Number" value="1.5"></ui5-input>

TEST_DECH_1: Type 1

TEST_DECH_1Dot: after 1 was Typed Type a . (Dot) --> Issue appears here now u can see the input box is cleard instantly.

As far as i can say. The language in google-chrome had no inpact on this issue. But when i changed the system Language then this issue appeard.

Hope this helps you to recreate the issue.

[TeodorTaushanov]

Hello @SAP/ui5-webcomponents-topic-rl, please check the suggested fix for this issue.

[hristop]

Hi @veith ,

I am closing this issue, as it will be handled as part of the linked feature request #4353. There is already internal BLI which was recently created, but in order to work on the topic we will need focus, which we currently do not have.

Best Regards, Hristo

[veith]

@hristop No problem, we have a patched component which will work in Switzerland.

I am happy to hear that there will be a separate component for number inputs.