Help

The Community will be temporarily unavailable starting on Friday February 28. We’ll be back as soon as we can! To learn more, check out our Announcements blog post.

Input field cursor jumping on re-render

Topic Labels: Custom Extensions
876 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Terry_Peters
4 - Data Explorer
4 - Data Explorer

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(() => );

0 Replies 0