The following code
The follwing code:
import { FunctionComponent, useEffect, useState } from "react";
import { useForm, Controller, Handler, useFieldArray } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { DataGrid } from '@mui/x-data-grid/DataGrid';
import {
GridColDef, GridRenderCellParams, GridRowId, GridRowParams, GridRowSelectionModel, GridCellEditStopParams,
GridCellEditStopReasons,
MuiEvent, GridCellParams, GridRenderEditCellParams,
} from '@mui/x-data-grid/models';
import { CoPresentOutlined } from "@mui/icons-material";
interface TextFieldConfigurationProps {
}
const TextField: FunctionComponent<TextFieldConfigurationProps> = () => {
const { handleSubmit, control, clearErrors, reset, setValue, getValues, watch, register,
formState: { errors, isDirty: isFormDirty, touchedFields: isFormTouchedFields, dirtyFields }
} = useForm<FileNamingConfigurationFormSchemaType>({
resolver: zodResolver(FileNamingConfigurationFormSchema),
mode: 'onBlur',
defaultValues: { name:'', nestedArray: [{ component: '', value: '' }] }
});
// manage the nestedArray using useFieldarray from hook
const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
control,
name: "nestedArray",
});
const CountButton = (params: GridRenderCellParams<any, string>) => {
console.log(params)
console.log(control)
return (
<FormControl sx={{ marginTop: 2, width: '100%' }} >
<Controller
control={control}
name={`nestedArray.${Number(params.row.id)}.value`}
render={({ field: { onChange, onBlur, value, ref } }) => (
< TextField
id={`nestedArray.${Number(params.row.id)}.value`}
value={value}
inputRef={ref}
onBlur={onBlur}
onChange={onChange}
value={value}
onChange={e => {
alert("enter")
setValue(`nestedArray.${Number(params.row.id)}.value`, e.target.value)
field.onChange(e.target.value);
}}
>
</TextField >
)
}
/>
</FormControl >
);
};
const columns: GridColDef[] = [
{
field: 'component', headerName: 'file Component', width: 140, editable: true,
renderCell: (params: GridRenderCellParams) => {
// console.log(params.row)
return (
<FormControl sx={{ marginTop: 2, width: '100%' }}>
<Controller
control={control}
name={`nestedArray.${Number(params.row.id)
}.component`}
render={({ field, }) => (
< TextField required
{...field}
id={`nestedArray.${Number(params.row.id)}.component`}
select
error={!!errors.nestedArray?.[Number(params.row.id)]?.component}
onChange={e => {
setValue(`nestedArray.${Number(params.row.id)
}.fileField`, '')
field.onChange(e.target.value);
// setValue(`nestedArray.${ Number(params.row.id) }.component`, e.target.value)
// generateSampleFileName();
}}
onBlur={field.onBlur}
value={field.value}
inputRef={field.ref}
// InputProps={{
// readOnly: mode === 'view' ? true : (mode === 'edit' ? true : false),
// }}
helperText={errors.nestedArray?.[Number(params.row.id)]?.component?.message}
>
<MenuItem disabled value="">
<em> Select One..</em>
</MenuItem>
</TextField>
)}
/>
</FormControl>
)
},
},
{
field: 'value', headerName: 'Value/Starts With', width: 70, editable: true,
renderCell: (params: GridRenderCellParams<any, string>) => {
return <CountButton {...params} />;
}
}
]
const submit: Handler<FileNamingConfigurationFormSchemaType> = async (data: FileNamingConfigurationFormSchemaType) => {
try {
console.log(data)
}
catch (error) {
console.error('Validation failed:', error)
}
}
const handleCancel = () => {
if (isFormDirty) {
}
else {
navigate("/")
}
}
return <>
<form noValidate autoComplete="off"
onSubmit={handleSubmit(submit)} >
<Box sx={{ padding: '3vh 2vh 4vh 2vh' }}>
< FormControl sx={{ marginTop: 2, marginRight: 2.5, width: '23%' }}>
<div style={labelStyle}> {`name`}</div>
<Controller
control={control}
name="=name"
render={({ field, }) => (
< TextField id="state" required
{...field}
select
error={!!errors.name}
onChange={e => {
field.onChange(e.target.value);
if (e.target.value.trim() !== '') {
setValue('layout', '')
setOnStateChange(e.target.value)
}
}}
onBlur={field.onBlur}
value={field.value}
inputRef={field.ref}
helperText={errors.name ? errors.name.message : "Select name"}
>
<MenuItem sx={{ height: 18, padding: '8px 12px 8px 12px' }} disabled value="">
<em> Select One..</em>
</MenuItem>
</TextField>
)}
/>
</FormControl>
<Stack sx={{ height: '75px', marginTop: '2vh' }}
direction="row"
justifyContent="center"
alignItems="center"
spacing={2}
>
{<Button sx={{ textTransform: 'none' }} variant="contained" onClick={() => append({ component: '', value: '' })}> Add</Button>}
{<Button sx={{ textTransform: 'none' }} type="submit" variant="contained"> Save</Button>}
{<CancelButton onClick={handleCancel}></CancelButton>}
</Stack>
<DataGrid
rowHeight={80}
autoHeight
rows={fields.map((mapping, index) => ({
id: index,
component: mapping.component,
value: mapping.value
}))}
columns={columns}
// }}
/>
</form>
</>;
};
export default TextField;
From above code when user enter the value in MUI textfield of nestedarray of Field value then user moved out of edit cell or from Filed of Value then the enter value is getting disappearing this is happing to only MUI text filed of data grid row but MUI select filed as component able to change the value where as Mui textfield of Value was not able to update the value ,when we enter value the value getting disappearing even i couldn’t find any root cause of but i was observe when user enter value in MUI textfiled of Value or edit cell of it then Controlled react form MUI textfiled of Value is not rendering field.onChange(e.target.value); event was not trigging ? can you help me what is the issue? from above code