Icon gets removed when pressing F5 in Brwoser or does not update at all since 3.1.1

galexey · January 15, 2022, 4:12pm

Poblem: Icon is empty or becomes empty after pressing F5 in browser.

steps to reproduce:
create 2 string items in your itemsfile:

String test_dynamic_icon_name_json
String test_dynamic_icon_name

open openhabconsole to set values:

openhab:send test_dynamic_icon_name_json '{"iconname":"garden"}'
openhab:send test_dynamic_icon_name 'bedroom'

create a testpage:

config:
  label: icontest
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-icon
                      config:
                        iconUseState: true
                        icon: =JSON.parse(items.test_dynamic_icon_name_json.state)["iconname"]
                        style:
                          height: 80px
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: Label
                      config:
                        text: =JSON.parse(items.test_dynamic_icon_name_json.state)["iconname"]
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-icon
                      config:
                        iconUseState: true
                        icon: =items.test_dynamic_icon_name.state
                        state: =items.test_dynamic_icon_name
                        style:
                          x: =items.test_dynamic_icon_name.state
                          height: 80px
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: Label
                      config:
                        text: =items.test_dynamic_icon_name.state
masonry: null
grid: []
canvas: []

Problem:

when you load the page in any browser you get no Icon in the first row (the garden icon).
the second line (the bedroom) works. (changing the string in the console will change the icon as expected)

sometimes you might get the correct icon, but as soon as you hit F5 to refresh the page, the icon is gone again.

This behaviour is since 3.1.1.

Browser Console Logs:
In the console I see this error:

17:23:12.268 TypeError: e.indexOf is not a function
    iconName http://10.10.20.83:8080/js/app.js:33
    get http://10.10.20.83:8080/js/app.js:7
    evaluate http://10.10.20.83:8080/js/app.js:7
    wn http://10.10.20.83:8080/js/app.js:7
    getter http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    $watch http://10.10.20.83:8080/js/app.js:7
    xn http://10.10.20.83:8080/js/app.js:7
    gn http://10.10.20.83:8080/js/app.js:7
    gn http://10.10.20.83:8080/js/app.js:7
    _init http://10.10.20.83:8080/js/app.js:7
    i http://10.10.20.83:8080/js/app.js:7
    componentInstance http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    f http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    fn http://10.10.20.83:8080/js/app.js:7
    mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    $mount http://10.10.20.83:8080/js/app.js:7
    init http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    d http://10.10.20.83:8080/js/app.js:7
    y http://10.10.20.83:8080/js/app.js:7
    S http://10.10.20.83:8080/js/app.js:7
    S http://10.10.20.83:8080/js/app.js:7
    Ho http://10.10.20.83:8080/js/app.js:7
    _update http://10.10.20.83:8080/js/app.js:7
    a http://10.10.20.83:8080/js/app.js:7
    get http://10.10.20.83:8080/js/app.js:7
    run http://10.10.20.83:8080/js/app.js:7
    pn http://10.10.20.83:8080/js/app.js:7
    at http://10.10.20.83:8080/js/app.js:7
    Ze http://10.10.20.83:8080/js/app.js:7

maybe the cause?
can it be that the new logic which is looking for the “oh:”, “f7:”,… in the icon name is investigating the state of the item instead of the completely evaluated expression? e.g. looks at

items.test_dynamic_icon_name_json.state

instead of

JSON.parse(items.test_dynamic_icon_name_json.state)["iconname"]

galexey · January 17, 2022, 11:48am

filed a bug: icon is empty when iconname is calculated with an expression and item.state contains ":" · Issue #1280 · openhab/openhab-webui · GitHub