zigbee2mqtt-frontend icon indicating copy to clipboard operation
zigbee2mqtt-frontend copied to clipboard

[Bug]: "Settings (specific)" values get submitted twice

Open pano9000 opened this issue 1 year ago • 0 comments

What happened?

When trying to set a value in the "Settings (specific)" tab of a device, the UI will submit the value at least twice. Once when you click into the field, and once more, when you leave the field. On the first click it will submit the original value again, even though there is no change yet. After changing the value and clicking outside of the input field (it does not matter, if it is a range slider or an input field), the desired new value gets submitted.

That first submission is useless and should be avoided, afterall: what is the point of submitting the same value again, if there is no change yet.

To reproduce this: On the dev version with the mock data, I cannot really see these notification messages, but If you add a console.log() into the component, you can make the described behaviour visible: e.g. in numeric.tsx, line 31

onChange={(value) => {console.log("value", value, (new Date()).toISOString()); onChange(endpoint as Endpoint, { [property]: value })}}

(here I've also added a timestamp to make it more obvious in the logs).

Unfortunately I have no deeper understanding of React and how everything is working under the hood, but in "vanilla" JS world, the equivalent observed here would be if the "submit value function" is triggered by both "focusin" and "focusout" events, instead of e.g. only on the onBlur.

An even better UI and UX friendlier solution would be of course to have a Save/Cancel button for that field (so that you can revert back to your original value, if you've accidentally changed the value, without the intent to save) , but that is out of scope for this bug report - I might create a new feature request for it later though

Let me know, if there are any questions

Thanks in advance!

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Relevant stacktrace

No response

Did you download state.json.zip?

I will not attach state.json.zip

pano9000 avatar Feb 13 '24 23:02 pano9000