I have edit mode in my material table. Each row contains two dropdowns. First dropdown has static list of options on selection in the on change handler ajax call is made to fetch list of options for second dropdown, the response with list of options is saved in the state, which causes component re-render and and disables edit mode- which I dont want. I want to keep edit moda until I click save button. I wonder if there is some method/option that I can access via tableRef that could help me?
title: 'Category',
field: 'category',
editComponent: ({ value, onChange }) => (
<Select
fullWidth
value={value ?? ''}
onChange={(event) => {
onChange(event.target.value);
dispatch(actions.getSubcategoriesList(event.target.value)).then((data) => {
setSubcategories(data);
});
}}
style={{ backgroundColor: '#f06565' }}
>
{actualsCategories.map((cat) => (
<MenuItem key={cat.id} value={cat.id}>
{cat.name}
</MenuItem>
))}
</Select>
),