Slider of dimmer item loses connection after page refresh (F5)

[ErikDB87]

The problem

If I refresh the page (F5), the communication between the browser and the item seems to break:

If I then try to change the dimmer to e.g. 5, I get this: In the openHAB console log, that triggers:

17:20:01.048 [INFO ] [openhab.event.ItemCommandEvent       ] - Item 'haard_eetkamer_niveau2' received command 4

Expected behavior

I would expect the page to be correctly refreshed. I would expect to be able to move the dot, and thus setting a new value.

Steps to reproduce

1. I created this item:

Dimmer haard_eetkamer_niveau2 "Haard eetkamer - Niveau" <temperature> { stateDescription=" "[min="1", max="8"] }

2. Then I navigate to the item in my Chrome browser, and refresh the page (F5). This makes the dot go to "1".
3. If I then try to move the dot, the Communicatiefout (Communication error) appears. The dot never moves, and the openHAB logs show the old state every time.

I just noticed this doesn't happen if I have Chrome's console open!

Your environment

runtimeInfo:
  version: 4.2.1
  buildString: Release Build
locale: nl-BE
systemInfo:
  configFolder: /etc/openhab
  userdataFolder: /var/lib/openhab
  logFolder: /var/log/openhab
  javaVersion: 17.0.12
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu17.52+17-CA
  osName: Linux
  osVersion: 6.8.0-45-generic
  osArchitecture: amd64
  availableProcessors: 4
  freeMemory: 517145824
  totalMemory: 987758592
  uptime: 572642
  startLevel: 100
addons:
  - automation-jsscripting
  - binding-astro
  - binding-buienradar
  - binding-chromecast
  - binding-enocean
  - binding-gpstracker
  - binding-hpprinter
  - binding-http
  - binding-icloud
  - binding-mail
  - binding-mqtt
  - binding-network
  - binding-openweathermap
  - binding-semsportal
  - binding-sonos
  - binding-tado
  - binding-upnpcontrol
  - misc-openhabcloud
  - persistence-rrd4j
  - transformation-jsonpath
  - ui-basic
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: true
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: windows
    pixelRatio: 1.25
    prefersColorScheme: light
  isSecureContext: false
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 8
    language: nl-BE
    languages:
      - nl-BE
      - nl-NL
      - nl
      - en-US
      - en
    onLine: true
    platform: Win32
  screen:
    width: 1536
    height: 864
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
    blocklyRenderer: null
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
    like Gecko) Chrome/129.0.0.0 Safari/537.36
timestamp: 2024-09-26T19:24:50.800Z

Browser console

After prissing F5 and then F12, the console is empty, and the dot is at the correct spot:

If I then try to move the dot, everything works as it should.

If I close the console and press F5 again, the dot is again at "1". If I then try to move the dot (with the console closed), I get the error. If I then open the console, this is what it looks like:

Sending command to haard_eetkamer_niveau2: 6
app.c0769f39a1ba699b096e.js:2 Sending command to haard_eetkamer_niveau2: NaN
:8080/rest/items/haard_eetkamer_niveau2:1 
        
        
       Failed to load resource: the server responded with a status of 400 (Bad Request)Understand this error
app.c0769f39a1ba699b096e.js:2 Uncaught (in promise) Bad RequestUnderstand this error

If I click on http://192.168.1.9:8080/rest/items/haard_eetkamer_niveau2:

{"link":"http://192.168.1.9:8080/rest/items/haard_eetkamer_niveau2","state":"5","stateDescription":{"minimum":1,"maximum":8,"step":1,"readOnly":false,"options":[]},"metadata":{"stateDescription":{"value":" ","config":{"step":"1","min":"1","max":"8"}}},"editable":true,"type":"Dimmer","name":"haard_eetkamer_niveau2","label":"Haard eetkamer - Niveau","category":"temperature","tags":[],"groupNames":[]}

If I click on http://192.168.1.9:8080/js/app.c0769f39a1ba699b096e.js, this opens:

Browser network traffic

It's impossible to record this. If I refresh while the console is open, the error doesn't happen:

Additional information