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