Inputs managed by createStore lose focus after update in Solid.js

I'm currently working on a website project using Solid.js and have encountered an issue where inputs managed by createStore() lose focus after typing just one character. This means that after entering a single letter, I have to click the input field again to continue typing.

• solid.js version : 1.8.16

the store initialition :

import { createStore } from "solid-js/store";
...
const [store, setStore] = createStore({
    forwarders: ["10.0.0.0", "8.8.8.8"]
});

In my component, I render a list of inputs bound to the store.forwarders array. Upon input, I update the corresponding value in the store :

return (
...
<For each={store.forwarder}>
  {(value, index) => {
    return (
      <input
        onInput={(e) => {
          // index() is getter of current element index
          setStore("forwarders", index(), e.currentTarget.value);
        }}
      />
    );
  }}
</For>

i tried and didn't work (it doesnt update the store at all):

import { produce } from "solid-js/store"
...
// in <input/> :
onInput = (e) => {
  setStore{
    "forwarders",
    produce((draft) => {
      draft[index()] = e.currentTarget.value;
    })
  );
};

Thanks for taking the time to help me

For creates a new DOM element whenever it's corresponding object updates. Since the element is removed from the DOM, you lose focus. You should use Index instead, which keeps the element reference.

You can read a detailed explanation here: https://stackoverflow.com/a/72366316/7134134