SolidJS•12mo ago

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)

pandeyarchit7

replit

Solid (TypeScript)

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

10 Replies

REEEEE•12mo ago

What are you using to render the sortedData?

Archit PandeyOP•12mo ago

I'm using a For to render the sortedData. (Added a link to a reproduction to my original post.)

REEEEE•12mo ago

You can swap to Index to keep the input focused but since the order changes the cell that had the input focused and updated won't have the same value

REEEEE•12mo ago

https://playground.solidjs.com/anonymous/797a1277-dc43-4a10-a3ad-f12314f89439 You can see the changes I made here

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

REEEEE•12mo ago

The possible solutions that I can think of at the moment is to either: 1. Keep track of the cell with the value that is focused and refocus it after the sort 2. or just only sort the data after the user is done inputting based on the input being blurred or Enter or some done editing button is pressed

Archit PandeyOP•12mo ago

Thanks! I tried Index as well, and had the same result as you. The input would stay focused, but it wouldn't move to the correct one after sort. I'm curious why For doesn't keep the input focused? Why is the input recreated on sort? I assumed that the DOM elements would simply be reordered.

REEEEE•12mo ago

Here's an in depth explanation on For vs Index https://discord.com/channels/722131463138705510/751355413701591120/1027260712088776744 Helpful SO post: https://stackoverflow.com/questions/70819075/solidjs-for-vs-index Helpful Video: https://www.youtube.com/watch?v=Bga_tmiR3eE Even though the index of the element is the same, the component would have to be re-executed to handle the change with For since the array changes after sort. While with Index only the value changed at a specific index and thus it can simply just update the value of the item at that index. I would refer to the links as I'm not too good at explaining this unfortunately

Archit PandeyOP•12mo ago

Thanks for the links! I understand the difference between Index and For. Maybe I'll implement the logic to refocus input after sort as that isn't supported by default.

Otonashi•12mo ago

i mean the explanation isn't accurate since nothing is being recreated here what i believe to be happening is that when reconciling the array and the dom, the focussed element is being reinserted and losing focus that way https://playground.solidjs.com/anonymous/cdcb6658-61e1-4001-9346-6076907531ea https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/reconcile.js#L39 seems like .focus()ing after the setPersons call should suffice to retain focus

Archit PandeyOP•12mo ago

Thanks! That works perfectly!

Gaming

Programming

Inputs losing focus on sort