Input field cursor jumping on re-render
I am trying to create an app that allows the user to edit/add data through input fields. I have the data binding and working fine. The issue happens when the user wants to edit anywhere in the text. It will allow a few characters input, then the app will refresh and the cursor will be at the end of the text. I simplified the code to just editing a record name for reproduction. Any ideas? Thanks in advance
import { cursor } from “@airtable/blocks”;
import {
useLoadable,
useWatchable,
initializeBlock,
useBase,
useRecords,
useGlobalConfig,
TablePickerSynced,
Box,
Text,
Input,
} from “@airtable/blocks/ui”;
import React from “react”;
function UpdateBlock() {
// YOUR CODE GOES HERE
const base = useBase();
const globalConfig = useGlobalConfig();
const tableId = globalConfig.get(“selectedTableId”);
const table = base.getTableByIdIfExists(tableId);
const records = useRecords(table);
useLoadable(cursor);
// re-render whenever the list of selected records or fields changes
useWatchable(cursor, [“
