Array changes are not recognized by useSettings

[xXBJXx]

When creating the native obj I noticed that when I change/add my config the save buttons are not unlocked. My native obj consists of one obj and otherwise just array with obj that are changed or deleted/added here is an example:

"native": {
    "tablets": [
      {
        "id": 0,
        "config": {
          "active": false,
          "interval": 30,
          "name": "Test1",
          "Login": {
            "ip": "",
            "port": 2323,
            "password": ""
          },
          "charger": {
            "active": false,
            "chargerId": "",
            "powerMode": "false",
            "loadStart": 20,
            "loadStop": 85
          }
        }
      },
            {
        "id": 1,
        "config": {
          "active": false,
          "interval": 30,
          "name": "Test2",
          "Login": {
            "ip": "",
            "port": 2323,
            "password": ""
          },
          "charger": {
            "active": false,
            "chargerId": "",
            "powerMode": "false",
            "loadStart": 20,
            "loadStop": 85
          }
        }
      }
    ]
  },

[AlCalzone]

Can you show how exactly you change the settings? It seems that the settings object instance doesn't change, so this doesn't trigger the comparison.

[xXBJXx]

Apologies for the delayed response.

I don't have the code anymore, as I built it differently. But basically, it was so, I built the object together and then passed it to the handleChange function in the index.tsx, with the option and value as in the example:

const SettingsPageContent: React.FC = React.memo(() => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { settings, originalSettings, setSettings } = useSettings<ioBroker.AdapterConfig>();

    // Updates the settings when the checkbox changes. The changes are not saved yet.
    const handleChange = <T extends keyof ioBroker.AdapterConfig>(option: T, value: ioBroker.AdapterConfig[T]) => {
        setSettings((s) => ({
            ...s,
            [option]: value,
        }));
    };

    return (
        <SettingPage settings={settings} changeSetting={(option, value) => handleChange(option, value)} />
    );
});

[xXBJXx]

I have created an example where the changes of a value in the array does not activate the save buttons Issue branch ⇨ https://github.com/xXBJXx/ioBroker.template_react/tree/issue