fix: Fixes broken playground form display and small mui bug

Fixes rjsf-team#3576 and rjsf-team#3579 by only passing `templates` with non-`undefined` values Fixes rjsf-team#3578 by using `TextField` to render the label key input value - Updated `@rjsf/material-ui` and `@rjsf/mui` to use the `TextField` as the input for the label key value rather than attempting to cobble one togther - Updated the snapshots accordingly - Updated the `Playground` component to only pass `templates` with values that aren't undefined to the main `Form` - Updated the `CHANGELOG.md` accordingly
heath-freenome · Apr 5, 2023 · 484f066 · 484f066
1 parent a17790c
commit 484f066
Show file tree

Hide file tree

Showing 6 changed files with 535 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,12 +16,28 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 5.5.2
+
+## @rjsf/material-ui
+
+- Switched to using `TextField` for the `WrapIfAdditionalTemplate` label key input to match the `@rjsf/mui` fix
+
+## @rjsf/mui
+
+- Switched to using `TextField` for the `WrapIfAdditionalTemplate` label key input, fixing [#3578](https://github.com/rjsf-team/react-jsonschema-form/issues/3578)
+
+## Dev / docs / playground
+
+- Updated the `templates` passed into the main `Form` to not include undefined values, fixing [#3576](https://github.com/rjsf-team/react-jsonschema-form/issues/3576) and [#3579](https://github.com/rjsf-team/react-jsonschema-form/issues/3579)
+
 # 5.5.1
 
 ## @rjsf/core
+
 - Updated `Form` to include the top `disabled` property in the `ui:submitButtonOptions` so the submit button will be disabled when the whole form is disabled. Fixes [#3264](https://github.com/rjsf-team/react-jsonschema-form/issues/3264). 
 
 ## @rjsf/utils
+
 - Added protections against infinite recursion of `$ref`s for the `toIdSchema()`, `toPathSchema()` and `getDefaultFormState()` functions, fixing [#3560](https://github.com/rjsf-team/react-jsonschema-form/issues/3560)
 - Updated `getDefaultFormState()` to handle object-based `additionalProperties` with defaults using `formData` in addition to values contained in a `default` object, fixing [#2593](https://github.com/rjsf-team/react-jsonschema-form/issues/2593)
 - Updated internal helper `withExactlyOneSubschema()` inside of `retrieveSchema()` to use the `isValid()` function rather than `validateFormData()` when determining the one-of branch 

diff --git a/packages/material-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/material-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
@@ -1,8 +1,6 @@
 import { CSSProperties, FocusEvent } from 'react';
-import FormControl from '@material-ui/core/FormControl';
 import Grid from '@material-ui/core/Grid';
-import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
+import TextField from '@material-ui/core/TextField';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   FormContextType,
@@ -62,17 +60,17 @@ export default function WrapIfAdditionalTemplate<
   return (
     <Grid container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
       <Grid item xs>
-        <FormControl fullWidth={true} required={required}>
-          <InputLabel>{keyLabel}</InputLabel>
-          <Input
-            defaultValue={label}
-            disabled={disabled || readonly}
-            id={`${id}-key`}
-            name={`${id}-key`}
-            onBlur={!readonly ? handleBlur : undefined}
-            type='text'
-          />
-        </FormControl>
+        <TextField
+          fullWidth={true}
+          required={required}
+          label={keyLabel}
+          defaultValue={label}
+          disabled={disabled || readonly}
+          id={`${id}-key`}
+          name={`${id}-key`}
+          onBlur={!readonly ? handleBlur : undefined}
+          type='text'
+        />
       </Grid>
       <Grid item={true} xs>
         {children}

diff --git a/packages/material-ui/test/__snapshots__/Object.test.tsx.snap b/packages/material-ui/test/__snapshots__/Object.test.tsx.snap
@@ -36,20 +36,23 @@ exports[`object fields additionalProperties 1`] = `
               className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true"
             >
               <div
-                className="MuiFormControl-root MuiFormControl-fullWidth"
+                className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
                 <label
                   className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
                   data-shrink={false}
+                  htmlFor="root_foo-key"
+                  id="root_foo-key-label"
                 >
                   foo Key
                 </label>
                 <div
-                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   onClick={[Function]}
                 >
                   <input
                     aria-invalid={false}
+                    autoFocus={false}
                     className="MuiInputBase-input MuiInput-input"
                     defaultValue="foo"
                     disabled={false}
@@ -455,20 +458,23 @@ exports[`object fields with title and description additionalProperties 1`] = `
               className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true"
             >
               <div
-                className="MuiFormControl-root MuiFormControl-fullWidth"
+                className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
                 <label
                   className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
                   data-shrink={false}
+                  htmlFor="root_foo-key"
+                  id="root_foo-key-label"
                 >
                   foo Key
                 </label>
                 <div
-                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   onClick={[Function]}
                 >
                   <input
                     aria-invalid={false}
+                    autoFocus={false}
                     className="MuiInputBase-input MuiInput-input"
                     defaultValue="foo"
                     disabled={false}
@@ -717,20 +723,23 @@ exports[`object fields with title and description from both additionalProperties
               className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true"
             >
               <div
-                className="MuiFormControl-root MuiFormControl-fullWidth"
+                className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
                 <label
                   className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
                   data-shrink={false}
+                  htmlFor="root_foo-key"
+                  id="root_foo-key-label"
                 >
                   foo Key
                 </label>
                 <div
-                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   onClick={[Function]}
                 >
                   <input
                     aria-invalid={false}
+                    autoFocus={false}
                     className="MuiInputBase-input MuiInput-input"
                     defaultValue="foo"
                     disabled={false}
@@ -1169,20 +1178,23 @@ exports[`object fields with title and description from uiSchema additionalProper
               className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true"
             >
               <div
-                className="MuiFormControl-root MuiFormControl-fullWidth"
+                className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
                 <label
                   className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
                   data-shrink={false}
+                  htmlFor="root_foo-key"
+                  id="root_foo-key-label"
                 >
                   foo Key
                 </label>
                 <div
-                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   onClick={[Function]}
                 >
                   <input
                     aria-invalid={false}
+                    autoFocus={false}
                     className="MuiInputBase-input MuiInput-input"
                     defaultValue="foo"
                     disabled={false}
@@ -1788,20 +1800,23 @@ exports[`object fields with title and description with global label off addition
               className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true"
             >
               <div
-                className="MuiFormControl-root MuiFormControl-fullWidth"
+                className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
                 <label
                   className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
                   data-shrink={false}
+                  htmlFor="root_foo-key"
+                  id="root_foo-key-label"
                 >
                   foo Key
                 </label>
                 <div
-                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   onClick={[Function]}
                 >
                   <input
                     aria-invalid={false}
+                    autoFocus={false}
                     className="MuiInputBase-input MuiInput-input"
                     defaultValue="foo"
                     disabled={false}

diff --git a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
@@ -1,8 +1,6 @@
 import { CSSProperties, FocusEvent } from 'react';
-import FormControl from '@mui/material/FormControl';
 import Grid from '@mui/material/Grid';
-import InputLabel from '@mui/material/InputLabel';
-import Input from '@mui/material/OutlinedInput';
+import TextField from '@mui/material/TextField';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   FormContextType,
@@ -62,17 +60,17 @@ export default function WrapIfAdditionalTemplate<
   return (
     <Grid container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
       <Grid item xs>
-        <FormControl fullWidth={true} required={required}>
-          <InputLabel>{keyLabel}</InputLabel>
-          <Input
-            defaultValue={label}
-            disabled={disabled || readonly}
-            id={`${id}-key`}
-            name={`${id}-key`}
-            onBlur={!readonly ? handleBlur : undefined}
-            type='text'
-          />
-        </FormControl>
+        <TextField
+          fullWidth={true}
+          required={required}
+          label={keyLabel}
+          defaultValue={label}
+          disabled={disabled || readonly}
+          id={`${id}-key`}
+          name={`${id}-key`}
+          onBlur={!readonly ? handleBlur : undefined}
+          type='text'
+        />
       </Grid>
       <Grid item={true} xs>
         {children}