Inputs losing focus on sort

TLDR: Input loses focus when changing the value of the input leads to reordering in a sorted list.

I'm creating a table component with Solid. My data is stored in a store:

const [data, setData] = createStore([{...}, {...}, {...}...]);

const [data, setData] = createStore([{...}, {...}, {...}...]);

const [data, setData] = createStore([{...}, {...}, {...}...]);

const [data, setData] = createStore([{...}, {...}, {...}...]);

This data can be sorted by a given key. I'm deriving sorted data from data as such:

const [key, setKey] = createSignal('firstName');
const sortedData = () => {
    return data.slice().sort((a, b) => a[key()] > b[key()] ? 1 : -1)
};

const [key, setKey] = createSignal('firstName');
const sortedData = () => {
    return data.slice().sort((a, b) => a[key()] > b[key()] ? 1 : -1)
};

const [key, setKey] = createSignal('firstName');
const sortedData = () => {
    return data.slice().sort((a, b) => a[key()] > b[key()] ? 1 : -1)
};

const [key, setKey] = createSignal('firstName');
const sortedData = () => {
    return data.slice().sort((a, b) => a[key()] > b[key()] ? 1 : -1)
};

Each row of data is rendered as a row of input elements. When the value of ones of these inputs changes, I call

setData

setData

setData

setData with the new value. This often leads to the list being reordered. And leads to the input losing focus. I'm assuming this is because upon reordering the DOM element changes? How can I get the input to stay focused? Thanks!

Edit: Link to a reproduction - https://replit.com/@pandeyarchit7/Solid-TypeScript#src/App.tsx

(my background is in React)

replitpandeyarchit7

Solid (TypeScript)

Solid template using TypeScript. https://solidjs.com

Inputs losing focus on sort

Similar Threads

Similar Threads

Similar Threads