Search code examples
sapui5

sap.m.Input's value binding with type="Number" clears the input field

This is a follow-up question to How to bind integer Input value to Slider.

I have found out that the demo solution in this answer only works when there are integer values in the slider and the language of your browser is set to English.

Snippet from the demo:

<Input xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{FloatType: 'sap/ui/model/type/Float'}"
  type="Number"
  value="{
    path: '/value',
    type: 'FloatType'
  }"
/>

To reproduce the issue:

  1. Go to the settings of your browser.
  2. Set e.g. German as the language.
  3. Reload the demo.

If the step of the slider is then set to an integer value (e.g. 1), values are all shown correctly in the input field.
With step="0.1", however, only integer values are shown whereas float values (e.g. "1,4") are hidden, causing warning in the browser console:

The specified value "1,4" cannot be parsed, or is out of range.

Any ideas or better solutions?

Solution

  • In that case, remove type="Number" from the <Input> control.

    The property type="Number" in UI5 shouldn't be used together with value-binding anyway, due to browsers implementing HTML <input type="number"> behavior slightly differently, according to the API reference:

    Only the default value sap.m.InputType.Text may be used in combination with data model formats. (Source).