Setting checkboxes no longer working

[CybDis]

Hi,

I think the issue I created in this repo: https://github.com/Olen/lovelace-flower-card/issues/134
which shows as error in browser:

flower-card.js?hacst…2974230252024714:75 Uncaught TypeError: Cannot assign to read only property 'show_bars' of object '#<Object>'
    at c._valueChanged (flower-card.js?hacst…230252024714:75:903)

is caused by this code here:
https://github.com/marcokreeft87/ha-editor-formbuilder/blob/b778b634effab3f90724fb53380c084c0ac7e859/src/index.ts#L64

The issue in your code arises because when e.tagName === "HA-CHECKBOX", you're modifying a value in this._config directly. This causes a problem if this._config is read-only, as you're trying to mutate an existing object or array directly. However, in the other cases, you're assigning a new object to this._config, which works fine.

Cause of the Problem: In JavaScript, modifying elements of an object or array that's marked as "read-only" will cause an error. In your case, when you directly modify this._config[e.configValue], it results in an error because this._config is read-only. On the other hand, when you reassign the entire this._config object (as you do in the other cases), it works because you're creating a new object.

Solution: Instead of directly mutating this._config[e.configValue], you should always create a new version of the object with the updated value, just like you do in the other parts of your code.

*) parts of this analysis were made by chatgpt

[marcokreeft87]

Why is the checkbox read-only? Can you look into that?

This has worked for many months so don't think it's because of the form editor library

[CybDis]

Yes, it worked for months, but stopped working for some time now.
Your lib has not changed. The your lib using lovelace-flower-card has not changed. But home assistant is constantly making changes, so I gues there is the cause.

The checkbox is not readonly. The this._config["some_setting"] is newly read-only.

I'm currently looking in the code and in most cases you create a new _config object as copy to make changes.

The error occurs because you're modifying the this._config object directly in the first case (when target.tagName === "HA-CHECKBOX").

this._config[target.configValue] = [...this._config[target.configValue], target.value];

This leads to an error because this._config seems to be currently a readonly or immutable object. In the second case (the else if branch), you're creating a new object using the spread operator, which works because you're not mutating the original object directly.

---

I'm currently trying to create a bugfix by creating new _config object instead of modifiying property of existing one

[CybDis]

Created a bugfix and verified: after the change, the checkboxes are working again

See attached pull request

[marcokreeft87]

Ok nice. Thnx for the work!