React-jsonschema-form: Material UI View does not respect "ui:title" value

[heath-freenome]

Prerequisites

• [x] I have read the documentation;
• [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [x] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

While the core theme will change the Label of a field to match the ui:title in the UISchema, the material UI view does not.

Steps to Reproduce

1. Go to the playground and select the ErrorSchema choice
2. Notice the Label for the Age field says Age of person
3. Switch to the material ui theme
4. Notice the Label for the Age field says Age

Expected behavior

The material UI view picks up the ui:title of a field from the UI schema

Actual behavior

The material UI view picks up the default title of the field from the schema

Version

whatever version the playground is running

[heath-freenome]

Maybe it's related to this line in ObjectFieldTemplate not using the ui:title?

[rafde]

When I ran into this issue, I noticed
https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/core/src/components/fields/StringField.js#L30
https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/core/src/components/fields/StringField.js#L47
when I traced why the ui:title wasn't working.

I ended up making a wrapper component for StringField. Here's a winded example

import React, { memo, } from 'react';
import Form, { Theme, } from '@rjsf/material-ui';

const {
    fields: muiFields,
} = Theme;

const {
    StringField: MUIStringField,
} = muiFields;

const StringField = memo( function StringFieldComponent( props ) {
    let _props = props;
    const title = props?.uiSchema?.['ui:title'];

    if ( title ) {
        const {
            schema,
        } = props;
        _props = {
            ...props,
            schema: {
                ...schema,
                title,
            },
        };
    }

    return <MUIStringField {
        ..._props
    } />;
} );

const fields = {
    StringField,
};

export default memo( function FormBuilderComponent( props ) {
    return <Form {...{
        fields,
        ...props,
    }} />;
} );

[jonathanstanley]

Some additional notes:

• nested string ui:title fails for material-ui, semantic-ui, fluent-ui, and bootstrap-4.
• antd keeps string ui:title correctly, however it does not represent the ui:description correctly
• inconsistent results between the themes for other types (boolean/array/enum/etc)

concise playground example ... just toggle between themes.

[epicfaace]

Yeah, that's unfortunate. Would definitely be open to merging a fix for this (both for the material-ui theme, or other themes as well).