question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material UI View does not respect "ui:title" value

See original GitHub issue

Prerequisites

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
rafdecommented, Jul 2, 2020

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,
	}} />;
} );
1reaction
heath-freenomecommented, Mar 25, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Frequently Asked Questions - Material UI - MUI
Frequently Asked Questions. Stuck on a particular problem? Check some of these common gotchas first in the FAQ. If you still can't find...
Read more >
React Material-UI Select is not reflecting the change
It won't respect the filtering and the defaultValue will not show the product that was actually set. Using value instead of defaultValue ...
Read more >
How to Design a Perfect React Material UI Form - YouTube
The complete guide on designing Material UI Form.As you know form is an important un-avoidable element in any website for user interaction.
Read more >
React Material Ui Title - StackBlitz
import AppBar from 'material-ui/AppBar';. import MuiThemeProvider from 'material-ui/. styles/MuiThemeProvider'; ... color values (yellow).
Read more >
Material UI - Formik
Formik can be easily used/integrated with Material UI, with just passing a few formik props to the respective Material UI Component props. Refer...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found