Oh-input-item: Actual item value not displayed

Setup, Configuration and Use Widgets
1

I have an item that I want to change. So I used the oh-input-item, but the actual value is not displayed (below 13 %). So the value always starts with 0. What am I doing wrong here?

image
image1097×144 2.65 KB

Item

image
image748×527 9.35 KB

Widget code

Summary 
config:
  icon: f7:status
  label: Status
  layoutType: responsive
  order: "61"
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:Widget_Batterie_Level_Status
                      config:
                        minLevel: gBatterieladungMin
                        orange: 10
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-input-item
                            config:
                              icon: oh:battery
                              inputmode: numeric
                              item: Batterieladung_LowValue
                              outline: true
                              sendButton: true
                              showTime: false
                              step: 1
                              title: Batterieladung Low Value
                              type: number
                              useDisplayState: true
                          - component: oh-label-item
                            config:
                              item: Batterieladung_LowValue
                              title: Batterieladung Low Value
                              icon: oh:battery
2

You have forgotten to post your widget code

3

Thanks for the hint I have updated the first post.

4

Hmm
 It seems to be working with number items only.

5

You’re not doing anything wrong here. This looks like a bug. I suspect that the oh-input component hasn’t actually been fully updated to work with the new quantity information available in the widgets. If you check your browser console, you will see that the input is throwing a warning about '13 %' not being a number that the number type input can parse.

If you just change type: number to type: text in the input, it should work, but you’ll have to be careful about what you enter in at that point.

This is definitely worth filing an issue on the UI repository.

6
7

@JustinG I’m not familiar with oh-input - is the spacing between the end of the input box and the checkmark button usually that far apart? Also the start of the input box seems like it should be aligned with the label above it. It looks terrible! Is there a rhyme or reason for it to look like that by default?

8

Try setting a state description of %.0f %%. Right now it is using a default state description of %.0f, and as this is dimensionless, it cuts off all after the comma. It doesn’t seem to use the % unit definition though. Do you have this item linked to a channel? What is the state description on that?

You should be able to enter with the unit in the entry value.

Make sure to have useDisplayState on in the widget definition.

@jimtng I don’t think this is a bug. You proposed fix brakes the logic, not showing the unit anymore.

9

that doesn’t work.

Indeed, ideally it should show the unit, and still be editable as number.

I mean, we can probably set the input type to text, and that would work, but we’d lose the number edit (up/down) feature.

10

True. When I created this, that’s the way I intended it to be used. But for BasicUI and the android app in sitemaps I went for a solution showing the unit separately (but can then not be changed) when using a number field, so you kept the number controls. This was never implemented for oh-input-item. I sticked to the standard html input types.

11

Two ways: Let user edit the whole thing as text, including the unit, or let them enter the number in one input, and the unit in another input, so the unit is also editable. If we want to go even further
 give them a drop down of compatible units :smiley:

12

I think that’s where you could rely on the state description and use that unit. I don’t see much value in making it editable.

13

Which sitemap widget does this? I tried Input but it lets me edit the whole thing including the unit, and no number controls (up/down). It acts like a standard text input.

14

Input widget, but with inputHint set to number instead of text (or empty).

15

Thanks! I’ll make oh-input behave the same way when the type is set to number

16

This is what I’ve got so far:

image
image1196×378 20.1 KB

1 Like
17

Update:

  • Display the number’s unit after the input field for numeric type
  • Make numeric input field right-aligned
  • Improve input-elements alignment
  • Accept Enter key to send the value, with or without a sendButton
  • Honor useDisplayState config

image
image1300×910 62.7 KB

18

That looks very good, thank you.

19

Very nice.
Out of interest, what is the logic behind it to decide if an increase/decrease button press changes an integer or a decimal value?
Just asking if there is a requirement to change a value from 0.3 to 0.4

20

The input components have, if I recall, always had some style issues. I don’t know if there’s any technical or other reason behind it. I don’t use them enough to have paid too much attention to it (I think I have one rarely used widget that includes an input).