"select" erroneously updates on UI reconnect

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.
[ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

If the UI disconnects while displaying a "select" sensor entity, then when it reconnects, it can erroneously update that entity with stale data.

The issue arises with my MQTT auto-discovered device. It has a "select" sensor entity so that either the device can change the state or the UI can. When the UI is connected, this all works correctly. However, IF I have a UI page open that displays this "select" entity, and then I put that browser tab in the background, then after 5 minutes (as per profile settings) the UI will disconnect. Then IF the device (not the UI) changes the state, and following that I reopen the tab that shows the "select", the UI will update the entity state with the old/stale UI data.

Of note: I also have a "box" sensor entity and this does NOT have this issue. On reconnect, the box entity is properly updated with the latest device state (which was delivered via MQTT). The UI does not send old/state UI state to the device.

Also of note: If the entity state doesn't change, then when the UI reconnects, the UI does NOT attempt to send an update. So it does appear that the UI is indeed reading the new device state (via MQTT). However, when the device state and the UI state are not equal, it is erroneously choosing to update the device's entity state to the older/stale UI state.

Also, if I put the UI tab in the background for less than 5 minutes (so it doesn't disconnect) then this issue doesn't happen. Instead, when the device updates the entity state (via MQTT) the UI simply notices the change and updates its state appropriately.

Also, if the select entity is NOT currently being displayed in a tab, then there are no problems switching to a page that shows the select entity. (And disconnecting or not disconnecting makes no difference to this.)

I see this in chrome tabs as well as in the Android app.

Describe the behavior you expected

The UI should not send old/stale state for a "select" entity to a device on UI reconnect.

Steps to reproduce the issue

Create a "select" entity for a MQTT device with a state_topic and command_topic so the state can be changed either by the device or the select element in the UI. (This might also be an issue for non-MQTT entities, but I don't know.)
In Profile Settings->Browser Settings, make sure it is set to auto-disconnect after 5 minutes.
Have the "select" UI entity showing on a browser page/tab.
Switch to any other browser tab and wait 5 minutes for the UI to disconnect.
without using the UI, change the entity state to something else. (Ensure the device properly informs the MQTT broker.)
Switch to the tab from step 3 above which shows the "select" entity.
You will then see the command_topic used to update the device with the old/stale UI state for that "select" entity. ...

What version of Home Assistant Core has the issue?

2024.7.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Google Chrome 126.0.6478.183

Which operating system are you using to run this browser?

macOS Sonoma 14.5

State of relevant entities

No response

Problem-relevant frontend configuration

The entity is autodiscovered by MQTT.
In the MQTT topic: homeassistant/select/A2M-AL9876543210987/A2M_Test/config
there is the following JSON:

{
  "component": "select",
  "device": {
    "name": "A2M-AL9876543210987",
    "model": "FAKE-BAT",
    "manufacturer": "AlphaESS",
    "identifiers": [
      "A2M-AL9876543210987"
    ]
  },
  "name": "A2M Test",
  "unique_id": "A2M-AL9876543210987_A2M_Test",
  "device_class": "enum",
  "options": [
    "One",
    "Two",
    "Three"
  ],
  "state_topic": "Alpha2MQTT/A2M-AL9876543210987/A2M_Test/state",
  "command_topic": "Alpha2MQTT/A2M-AL9876543210987/A2M_Test/command",
  "availability_topic": "Alpha2MQTT/A2M-AL9876543210987/status"
}

Javascript errors shown in your browser console/inspector

none

Additional information

The issue was discussed in the forums in this post: https://community.home-assistant.io/t/is-this-a-bug-with-select/752416

There is a somewhat useful screenshot there as well as further descriptions.

home-assistant / frontend