marmelab/react-admin · warning

Deprecated. FormTab now wrap their content inside a FormGrou

Error message

Deprecated. FormTab now wrap their content inside a FormGroupContextProvider. If you implemented custom forms with tabs, please use the FormGroupContextProvider. See https://marmelab.com/react-admin

What it means

findTabsWithErrors is a deprecated helper from older react-admin versions that scanned TabbedForm children for validation errors. Since FormTab now wraps its content in a FormGroupContextProvider, error tracking is handled internally and this helper only emits a deprecation warning. It is kept only to warn developers still calling it in custom tabbed forms.

Source

Thrown at packages/ra-ui-materialui/src/form/TabbedForm.tsx:134

            HtmlHTMLAttributes<HTMLFormElement>,
            'defaultValue' | 'onSubmit' | 'children'
        >,
        Partial<TabbedFormViewProps> {
    children: ReactNode;
    className?: string;
    defaultValues?: any;
    formRootPathname?: string;
    mutationMode?: MutationMode;
    record?: RaRecord;
    resource?: string;
    syncWithLocation?: boolean;
    tabs?: ReactElement;
    toolbar?: ReactNode | false;
    warnWhenUnsavedChanges?: boolean;
}

export const findTabsWithErrors = (children, errors) => {
    console.warn(
        'Deprecated. FormTab now wrap their content inside a FormGroupContextProvider. If you implemented custom forms with tabs, please use the FormGroupContextProvider. See https://marmelab.com/react-admin/EditTutorial.html#grouping-inputs'
    );

    return Children.toArray(children).reduce((acc: any[], child) => {
        if (!isValidElement(child)) {
            return acc;
        }

        const inputs = Children.toArray(child.props.children);

        if (
            inputs.some(
                input =>
                    isValidElement(input) && get(errors, input.props.source)
            )
        ) {
            return [...acc, child.props.label];
        }

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Remove the findTabsWithErrors call entirely; TabbedForm/FormTab handle error display automatically.
  2. If implementing custom tabbed forms, wrap tab content with FormGroupContextProvider as the message links suggest.
  3. Follow the migration guide at https://marmelab.com/react-admin/EditTutorial.html#grouping-inputs.

Example fix

// before
const tabsWithErrors = useMemo(() => findTabsWithErrors(children, errors), [children, errors]);
// after
// delete the call; use FormTab inside TabbedForm and errors render automatically
<TabbedForm>
  <FormTab label="Details">
    <TextInput source="name" />
  </FormTab>
</TabbedForm>
Defensive patterns

Strategy: fallback

Validate before calling

import { findTabsWithErrors } from 'ra-ui-materialui';
const isDeprecatedHelper = typeof findTabsWithErrors === 'function';
if (isDeprecatedHelper) console.warn('Remove findTabsWithErrors usage; TabbedForm handles errors internally.');

Prevention

When it happens

Trigger: Calling the exported findTabsWithErrors(children, errors) function directly in custom form code, typically copied from old TabbedForm implementations.

Common situations: Upgrading react-admin while keeping a custom tabbed form that replicates old TabbedForm error-rendering behavior; old StackOverflow/blog snippets still calling the helper.

Related errors


AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/edc567051b39b9f3. Report an issue: GitHub.