Fix MUI/material-ui RangeWidget missing htmlFor and schema.title (rjs…

…f-team#3281) * match FormLabel component with other widgets * update changelog * update test snapshots
shijistar · Jun 8, 2023 · 4dc64c8 · 4dc64c8
1 parent b81bbc0
commit 4dc64c8
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,12 @@ should change the heading of the (upcoming) version to include a major version b
 - Added `ref` definition to `ThemeProps` fixing [#2135](https://github.com/rjsf-team/react-jsonschema-form/issues/2135)
 - Updated the `onChange` handler in `Form` to use the new `preventDuplicates` mode of `mergeObjects()` when merging `extraErrors` when live validation is off, fixing [#3169](https://github.com/rjsf-team/react-jsonschema-form/issues/3169)
 
+## @rjsf/material-ui
+- Fix RangeWidget missing htmlFor and schema.title [#3281](https://github.com/rjsf-team/react-jsonschema-form/pull/3281)
+
+## @rjsf/mui
+- Fix RangeWidget missing htmlFor and schema.title [#3281](https://github.com/rjsf-team/react-jsonschema-form/pull/3281)
+
 ## @rjsf/utils
 - Updated `computedDefaults` (used by `getDefaultFormState`) to skip saving the computed default if it's an empty object unless `includeUndefinedValues` is truthy, fixing [#2150](https://github.com/rjsf-team/react-jsonschema-form/issues/2150) and [#2708](https://github.com/rjsf-team/react-jsonschema-form/issues/2708)
 - Expanded the `getDefaultFormState` util's `includeUndefinedValues` prop to accept a boolean or `"excludeObjectChildren"` if it does not want to include undefined values in nested objects

diff --git a/packages/material-ui/src/RangeWidget/RangeWidget.tsx b/packages/material-ui/src/RangeWidget/RangeWidget.tsx
@@ -29,8 +29,8 @@ const RangeWidget = ({
 
   return (
     <>
-      <FormLabel required={required} id={id}>
-        {label}
+      <FormLabel required={required} htmlFor={id}>
+        {label || schema.title}
       </FormLabel>
       <Slider
         disabled={disabled || readonly}

diff --git a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap
@@ -1821,10 +1821,8 @@ exports[`single fields slider field 1`] = `
     >
       <label
         className="MuiFormLabel-root"
-        id="root"
-      >
-        
-      </label>
+        htmlFor="root"
+      />
       <span
         className="MuiSlider-root MuiSlider-colorPrimary"
         id="root"

diff --git a/packages/mui/src/RangeWidget/RangeWidget.tsx b/packages/mui/src/RangeWidget/RangeWidget.tsx
@@ -29,8 +29,8 @@ const RangeWidget = ({
 
   return (
     <>
-      <FormLabel required={required} id={id}>
-        {label}
+      <FormLabel required={required} htmlFor={id}>
+        {label || schema.title}
       </FormLabel>
       <Slider
         disabled={disabled || readonly}

diff --git a/packages/mui/test/__snapshots__/Form.test.tsx.snap b/packages/mui/test/__snapshots__/Form.test.tsx.snap
@@ -8130,10 +8130,8 @@ exports[`single fields slider field 1`] = `
     >
       <label
         className="MuiFormLabel-root MuiFormLabel-colorPrimary emotion-1"
-        id="root"
-      >
-        
-      </label>
+        htmlFor="root"
+      />
       <span
         className="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeMedium emotion-2"
         id="root"