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, [“selectedRecordIds”, “selectedFieldIds”]);
const tasks = records
? records.map((record) =>
record.id == cursor.selectedRecordIds ? (
) : (
)
)
: null;
return (
{tasks}
);
}
function UpdateName(table, record, name) {
table.updateRecordsAsync([
{
id: record.id,
fields: { “Pattern Name”: name },
},
]);
}
function Task({ table, record }) {
return (
<Input
style={{
padding: “1%”,
fontSize: “1.4em”,
backgroundColor: “#fff”,
justifyContent: “center”,
width: “fitContent”,
height: “fitContent”,
}}
value={record.name ? record.name : null}
onChange={(e) => {
UpdateName(table, record, e.target.value);
}}
placeholder=“Pattern Name here”
/>
);
}
initializeBlock(() => );
