FieldTemplate cannot override full widget for MaterialUI

[jbcpollak]

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.
• [ ] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

I am trying to entirely override a widget to make sure it takes up no space on the page. I have the following FieldTemplate:

const HiddenFieldTemplate: React.FunctionComponent<FieldTemplateProps> = (props) => {
	const { children } = props;

	return <Container style={{ display: 'none' }}>{children}</Container>;
};

and I am adding it to my schema as:

const uiSchema = {
	myobjs: {
		items: {
			foo: {
				'ui:widget': 'hidden',
				'ui:FieldTemplate': HiddenFieldTemplate,
			},
        ...

this renders as:

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12" style="margin-bottom: 10px;"> 
  <div class="MuiContainer-root MuiContainer-maxWidthLg" style="display: none;">
    <input type="hidden" id="root_myobjs_0_foo" value="0">
  </div>
</div>

How can I override the outer div? I'm not even entirely sure what the purpose of the outer div is.

Note: I'm doing this because using 'ui:widget': 'hidden', makes the field use an <input type="hidden">, but because of the two outer divs, it still takes up room on the page and makes the form look awkward.

Version

    "@rjsf/core": "^2.4.2",
    "@rjsf/material-ui": "^2.4.2",

[heath-freenome]

@jbcpollak Can you check to see whether this is still an issue in the v5 beta?

[taylortm]

I checked and this appears to be working now.

function HiddenFieldTemplate(props: FieldTemplateProps) { const { children } = props; return <Container style={{ display: "none" }}>{children}</Container>; } then inside the ui_schema: _id: { "ui:widget": "hidden", "ui:FieldTemplate": HiddenFieldTemplate, },

this works for me.

[heath-freenome]

Awesome, closing this