Input is losing focus , when wrapped with VariableSizeList

[pst37]

I have wrapped a input element inside VariableSizeList. When there is change in input component, the input component is losing focus , because whole component is getting remounted or i can say react is re-creating whole new tree.

I have added the example here. Example here

Steps:- 1.) Open Element tab in dev-tools 2.) type anything in any input box

You will notice the wrapper of all new input is getting updated ...

[Dimitrov-Codes]

I am facing the same issue . Are there any workarounds to this??

[h7y]

Moving the renderer 👇 to a separate function as shown in the docs would fix this :)

{({ index }) => (
  <div className="test">
    <input
      type="text"
      placeholder="search"
      value={searchText[index]}
      onChange={(e) => onChange(e, index)}
    />
  </div>
)}