Keeping Focus in Editable Tables: A Tale of Blue Arrows and Lost Cursors

💬 App Building
1

My goal:

Create an Excel-like editing experience in my inventory table where users can:

  • Edit a cell

  • Press Tab or arrow keys to move to the next cell

  • Changes save automatically in the background

  • Cursor stays in place - just like Excel

Issue:

When a user edits a cell, my script saves the data and runs table1.clearChangeset() to remove the blue change indicator.

Problem: After clearing the changeset, the user loses focus on the cell. They can't immediately Tab or use arrow keys to the next cell like in Excel.

Steps I've taken to troubleshoot:

Tried multiple approaches to restore focus after clearChangeset():

Additional info: (Cloud or Self-hosted, Screenshots)

  1. Environment: Self-hosted
  2. Trigger: changeCell event on table
  3. Script: Saves to PostgreSQL, updates status, refreshes table, clears changeset
2

Hey @appbuildernyc,

What a fun problem! (I know - only fun if there’s a solution, right?!)

You can try putting a line in your script before table1.clearChangeset() that saves the row number to a state variable.

I’m going to play around with this idea (including saving the cell to a state variable) now to see if it would work.

1 Like
3

Hello,

Thanks for your reply.

Thats just a small part of the puzzle, what Im asking is something else.

4

Aren’t you trying to restore the focus?

If so, you have to capture the focus before the clear. And then re-focus it after.

Which part are you asking about?

1 Like
5

Hi @appbuildernyc,

I just did some testing at it seems that the table component doesn't have a .focusCell() method, I can definitely make a feature request for this, where you can specify a cell using a row and column (similar to what @mathfour was suggesting) which could be saved to a variable then passed into the focusing method.

Let me know if that would help with your use case!

2 Likes
6

Feature request has been made!

Will update this thread with any news I hear from the engineering team on that ticket :+1: