Any help on this issue would be really appreciated!
I’m making a simple app to create quotes. I’ve got everything up and running to edit fields with the <Input />
component and for anything other than text it works great e.g.
function updateRecord (quote, recordFields) {
quotesTable.updateRecordAsync(quote, recordFields)
}
<Input
name="Hire Start"
type="date"
value={quote.getCellValue('Hire Start')}
onChange={(e) => updateRecord(quote, {'Hire Start': e.target.value})}
/>
However, when the input type is text (or currency, anything that can be typed quickly), there’s a very noticeable delay in the update to the cell value which makes input glitchy and, if you type fast enough, inputs get dropped.
I then switched to controlling the <Input />
with a state object, only writing back to Airtable in a useEffect()
that watched the state object. This solved the issue but now updates made in Airtable (outside of the app) are of course not reflected in the app until next render.
How do I find a middle-ground between these two patterns? Need to be able to input smoothly but have data go back and forth between Airtable and the app in realtime?
Hope this makes sense to someone but can share more of my code if needed.
Thanks!