Archit Pandey Posts - Answer Overflow

Archit Pandey

•Created by Archit Pandey on 12/10/2023 in #support

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([{...}, {...}, {...}...]);

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)
};

Each row of data is rendered as a row of input elements. When the value of ones of these inputs changes, I call 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)

13 replies

Gaming

Programming