DataTable Row Editing: Focus Jumps to Tick Button When Typing in Editor with Zod and React Hook Form #2353
Unanswered
KavindaInivos
asked this question in
PrimeReact
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
Issue: When editing a row in the PrimeReact DataTable component, typing in an input field causes the focus to jump to the tick (save) button. This behavior interrupts the typing process and prevents users from completing their input. This issue occurs when using React Hook Form with Zod for validation.
Steps to Reproduce:
Expected Behavior:
The input field should retain focus while typing, allowing users to continue editing without interruption.
Actual Behavior:
The focus jumps to the tick (save) button, preventing users from continuing to type in the input field.
Logs :
![image](https://private-user-images.githubusercontent.com/128116349/350250543-29a5cc6b-ee79-4084-93bb-515e9d161b7a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTkwNjIsIm5iZiI6MTcyNTU5ODc2MiwicGF0aCI6Ii8xMjgxMTYzNDkvMzUwMjUwNTQzLTI5YTVjYzZiLWVlNzktNDA4NC05M2JiLTUxNWU5ZDE2MWI3YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNlQwNDU5MjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hOTc4MTIzZThmZTVlYjhhZWIwYTdjMTc2ZWRkOWFlZDdmOGFiZDU2NmJhOTA1ZmJiYzhhYjgwY2JiZjFjN2U1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.VVYLGFEYkBtPhOvnPyabrZmCdqnT3x1OKYhho8BS9w4)
![image](https://private-user-images.githubusercontent.com/128116349/350250591-6a662cb8-7932-4e58-b811-9d437324c2e0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTkwNjIsIm5iZiI6MTcyNTU5ODc2MiwicGF0aCI6Ii8xMjgxMTYzNDkvMzUwMjUwNTkxLTZhNjYyY2I4LTc5MzItNGU1OC1iODExLTlkNDM3MzI0YzJlMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNlQwNDU5MjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zOTQxMmYyNzAxMjQ2OTRmOTQzMzUyYTk4NzMwNzI0NjIzNjE4ZTk3NTJmM2YyNTdiY2I2N2EzYjk4OGY2NzM3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.AS6gRA88N397aeCMzKyJjNYkOJ2Wh1BSaPbVZDsz3_4)
![image](https://private-user-images.githubusercontent.com/128116349/350250738-fec6e62e-8b41-4685-99c3-e117aa7e8937.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTkwNjIsIm5iZiI6MTcyNTU5ODc2MiwicGF0aCI6Ii8xMjgxMTYzNDkvMzUwMjUwNzM4LWZlYzZlNjJlLThiNDEtNDY4NS05OWMzLWUxMTdhYTdlODkzNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNlQwNDU5MjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05MGI0N2Y0Mzg0OGNiZTk5ODZiNDZiNGE0MGJiOTJkZDAwNThhOGE3ZGFiYTYwZjNlNjlmNTY0MzhiNTk0ZTdkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.H0Nk6H806wPqmE2Ftddr6DfQQRBmA5mnnwWzVmjW-6Y)
https://stackblitz.com/edit/tiqikn?file=src%2FApp.jsx,src%2Fmain.jsx
`import React, { useEffect, useState } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { ProductService } from './service/ProductService';
const schema = z.object({
code: z
.string()
.min(1, { message: 'Code is required' })
.max(10, { message: 'Code cannot exceed 10 characters' }),
});
export default function RowEditingDemo() {
const [products, setProducts] = useState([]);
const [statuses] = useState(['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']);
const {
control,
handleSubmit,
setValue,
getValues,
trigger,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
mode: 'onChange',
});
useEffect(() => {
ProductService.getProductsMini().then((data) => setProducts(data));
}, []);
const validateRow = async (newData) => {
setValue('code', newData.code || '');
};
const onRowEditComplete = async (e) => {
const { newData, index } = e;
};
const onRowEditSave = async (e) => {
const { newData, index } = e;
};
const onRowEditCancel = (e) => {
console.log('Row edit canceled');
};
const rowEditValidator = (rowData) => {
return true;
};
const textEditor = (options) => {
return (
<Controller
name={options.field}
control={control}
defaultValue={options.value}
render={({ field, fieldState }) => (
<>
<InputText
{...field}
onChange={(e) => {
field.onChange(e.target.value);
options.editorCallback(e.target.value);
}}
/>
{fieldState.error && (
{fieldState.error.message}
)}
</>
)}
/>
);
};
const allowEdit = (rowData) => {
return rowData.name !== 'Blue Band';
};
return (
<DataTable
value={products}
editMode="row"
dataKey="id"
onRowEditComplete={onRowEditComplete}
onRowEditSave={onRowEditSave}
onRowEditCancel={onRowEditCancel}
rowEditValidator={rowEditValidator}
// tableStyle={{ minWidth: '50rem' }}
>
<Column
field="code"
header="Code"
editor={(options) => textEditor({ ...options, field: 'code' })}
style={{ width: '20%' }}
>
<Column
rowEditor={allowEdit}
headerStyle={{ width: '10%', minWidth: '8rem' }}
bodyStyle={{ textAlign: 'center' }}
>
);
}
`
Beta Was this translation helpful? Give feedback.
All reactions