DataTable Row Editing: Focus Jumps to Tick Button When Typing in Editor with Zod and React Hook Form

[KavindaInivos]

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:

1. Navigate to a DataTable with row editing enabled.
2. Click to edit a row.
3. Begin typing in the input field.
4. Observe that the focus unexpectedly shifts to the tick (save) button, making it difficult to continue typing.

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 :
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 isValid = await trigger('code');
return isValid;

};

const onRowEditComplete = async (e) => {
const { newData, index } = e;

const isValid = await validateRow(newData);
if (isValid) {
  let updatedProducts = [...products];
  updatedProducts[index] = newData;
  setProducts(updatedProducts);
} else {
  console.log('Validation failed');
}

};

const onRowEditSave = async (e) => {
const { newData, index } = e;

const isValid = await validateRow(newData);
if (isValid) {
  let updatedProducts = [...products];
  updatedProducts[index] = newData;
  setProducts(updatedProducts);
} else {
  console.log('Validation failed');
}

};

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' }}
>

);
}
`