TabbedForm not highlighting which tab has an error

Question

I have a TabbedForm with 2 tabs, each tab having a single required() field. When I submit this form and the validation fails, I expect the unfocussed tab(s) to indicate that there is an error with a field within the tab (e.g. with a red underline or red text).

This appears to be working fine in a react-admin demo (https://marmelab.com/react-admin-demo/#/products/126) however even after looking a the source code for this example (https://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx), I cannot seem to replicate the same functionality in my project.

I have the following code:

const App = () => {
  const dataProvider = jsonServerProvider(
    "https://jsonplaceholder.typicode.com"
  );

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="users" list={ListGuesser} edit={EditForm} />
    </Admin>
  );
};

export const EditForm = (props: EditProps) => {
  return (
    <Edit {...props}>
      <TabbedForm>
        <FormTab label="Tab 1">
          <TextInput source="name" validate={required()} />
        </FormTab>
        <FormTab label="Tab 2">
          <TextInput source="username" validate={required()} />
        </FormTab>
      </TabbedForm>
    </Edit>
  );
};

Image showing Tab 2 selected and is valid and there is a validation error on Tab 1, but no highlight on Tab 1 to tell the user that this is the Tab that has the error.

There has been a similar question asked here (Show Tab Form Validation For Inputs Not Direct Children Of <FormTab>) but the resolution does not apply to my problem.

Is there something I'm missing here?

score 0 · Answer 1 · answered Jan 05 '23 at 08:05

plz check the demo source code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx, it's using validate function:

<RichTextInput source="description" label="" validate={req} />

and the "req" is defined at line 86:

const req = [required()];

I've encountered same problem, and solve it by using the way (validation function) of demo source code. HTH

TabbedForm not highlighting which tab has an error

1 Answers1