fix #3815 (#3822)

- Fix #3815 by removing TitleFieldTemplate, antd Checkbox.Group handles title rendering itself. - Add title field in related snapshot test
rjsf-team · Aug 14, 2023 · 2a12401 · 2a12401
1 parent 5684e36
commit 2a12401
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,10 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Updated `MultiSchemaField` to merge all top level fields except properties for anyOf/oneOf options, fixing [#3808](https://github.com/rjsf-team/react-jsonschema-form/issues/3808) and [#3787](https://github.com/rjsf-team/react-jsonschema-form/issues/3787)
 
+## @rjsf/antd
+
+- Updated CheckboxesWidget to not show duplicate title, fixing [#3815](https://github.com/rjsf-team/react-jsonschema-form/issues/3815)
+
 ## @rjsf/utils
 
 - Updated `retrieveSchemaInternal` allOf logic for precompiled schemas to resolve top level properties fixing [#3817](https://github.com/rjsf-team/react-jsonschema-form/issues/3817)

diff --git a/packages/antd/src/widgets/CheckboxesWidget/index.tsx b/packages/antd/src/widgets/CheckboxesWidget/index.tsx
@@ -4,9 +4,7 @@ import {
   ariaDescribedByIds,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
-  getTemplate,
   optionId,
-  titleId,
   FormContextType,
   WidgetProps,
   RJSFSchema,
@@ -23,25 +21,8 @@ export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->({
-  autofocus,
-  disabled,
-  formContext,
-  id,
-  label,
-  hideLabel,
-  onBlur,
-  onChange,
-  onFocus,
-  options,
-  readonly,
-  registry,
-  schema,
-  uiSchema,
-  value,
-}: WidgetProps<T, S, F>) {
+>({ autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, value }: WidgetProps<T, S, F>) {
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, options);
 
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
 
@@ -65,17 +46,6 @@ export default function CheckboxesWidget<
 
   return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
     <>
-      {!hideLabel && !!label && (
-        <div>
-          <TitleFieldTemplate
-            id={titleId<T>(id)}
-            title={label}
-            schema={schema}
-            uiSchema={uiSchema}
-            registry={registry}
-          />
-        </div>
-      )}
       <Checkbox.Group
         disabled={disabled || (readonlyAsDisabled && readonly)}
         name={id}

diff --git a/packages/antd/test/__snapshots__/Form.test.tsx.snap b/packages/antd/test/__snapshots__/Form.test.tsx.snap
@@ -321,6 +321,18 @@ exports[`single fields checkboxes field 1`] = `
         className="ant-row ant-form-item-row"
         style={{}}
       >
+        <div
+          className="ant-col ant-col-24 ant-form-item-label"
+          style={{}}
+        >
+          <label
+            className=""
+            htmlFor="root"
+            title="An enum list rendered as checkboxes"
+          >
+            An enum list rendered as checkboxes
+          </label>
+        </div>
         <div
           className="ant-col ant-col-24 ant-form-item-control"
           style={{}}

diff --git a/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap b/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`single fields checkboxes field 1`] = `
         className="form-label"
         htmlFor="root"
       >
-        
+        An enum list rendered as checkboxes
       </label>
       <div
         className="form-group"

diff --git a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
@@ -326,6 +326,11 @@ exports[`single fields checkboxes field 1`] = `
 }
 
 .emotion-2 {
+  display: block;
+  text-align: start;
+}
+
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -335,7 +340,7 @@ exports[`single fields checkboxes field 1`] = `
   flex-direction: column;
 }
 
-.emotion-2>*:not(style)~*:not(style) {
+.emotion-3>*:not(style)~*:not(style) {
   margin-top: 0.5rem;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
@@ -344,7 +349,7 @@ exports[`single fields checkboxes field 1`] = `
   margin-inline-start: 0px;
 }
 
-.emotion-3 {
+.emotion-4 {
   cursor: pointer;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -358,7 +363,7 @@ exports[`single fields checkboxes field 1`] = `
   position: relative;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -381,16 +386,16 @@ exports[`single fields checkboxes field 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-5 {
+.emotion-6 {
   -webkit-margin-start: 0.5rem;
   margin-inline-start: 0.5rem;
 }
 
-.emotion-19 {
+.emotion-20 {
   margin-top: 3px;
 }
 
-.emotion-20 {
+.emotion-21 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -435,11 +440,18 @@ exports[`single fields checkboxes field 1`] = `
         className="chakra-form-control emotion-1"
         role="group"
       >
+        <label
+          className="chakra-form__label emotion-2"
+          htmlFor="root"
+          id="root-label"
+        >
+          An enum list rendered as checkboxes
+        </label>
         <div
-          className="chakra-stack emotion-2"
+          className="chakra-stack emotion-3"
         >
           <label
-            className="chakra-checkbox emotion-3"
+            className="chakra-checkbox emotion-4"
             onClick={[Function]}
           >
             <input
@@ -475,14 +487,14 @@ exports[`single fields checkboxes field 1`] = `
             />
             <span
               aria-hidden={true}
-              className="chakra-checkbox__control emotion-4"
+              className="chakra-checkbox__control emotion-5"
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
               onMouseUp={[Function]}
             />
             <span
-              className="chakra-checkbox__label emotion-5"
+              className="chakra-checkbox__label emotion-6"
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
@@ -494,7 +506,7 @@ exports[`single fields checkboxes field 1`] = `
             </span>
           </label>
           <label
-            className="chakra-checkbox emotion-3"
+            className="chakra-checkbox emotion-4"
             onClick={[Function]}
           >
             <input
@@ -530,14 +542,14 @@ exports[`single fields checkboxes field 1`] = `
             />
             <span
               aria-hidden={true}
-              className="chakra-checkbox__control emotion-4"
+              className="chakra-checkbox__control emotion-5"
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
               onMouseUp={[Function]}
             />
             <span
-              className="chakra-checkbox__label emotion-5"
+              className="chakra-checkbox__label emotion-6"
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
@@ -549,7 +561,7 @@ exports[`single fields checkboxes field 1`] = `
             </span>
           </label>
           <label
-            className="chakra-checkbox emotion-3"
+            className="chakra-checkbox emotion-4"
             onClick={[Function]}
           >
             <input
@@ -585,14 +597,14 @@ exports[`single fields checkboxes field 1`] = `
             />
             <span
               aria-hidden={true}
-              className="chakra-checkbox__control emotion-4"
+              className="chakra-checkbox__control emotion-5"
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
               onMouseUp={[Function]}
             />
             <span
-              className="chakra-checkbox__label emotion-5"
+              className="chakra-checkbox__label emotion-6"
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
@@ -604,7 +616,7 @@ exports[`single fields checkboxes field 1`] = `
             </span>
           </label>
           <label
-            className="chakra-checkbox emotion-3"
+            className="chakra-checkbox emotion-4"
             onClick={[Function]}
           >
             <input
@@ -640,14 +652,14 @@ exports[`single fields checkboxes field 1`] = `
             />
             <span
               aria-hidden={true}
-              className="chakra-checkbox__control emotion-4"
+              className="chakra-checkbox__control emotion-5"
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
               onMouseUp={[Function]}
             />
             <span
-              className="chakra-checkbox__label emotion-5"
+              className="chakra-checkbox__label emotion-6"
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
@@ -663,10 +675,10 @@ exports[`single fields checkboxes field 1`] = `
     </div>
   </div>
   <div
-    className="emotion-19"
+    className="emotion-20"
   >
     <button
-      className="chakra-button emotion-20"
+      className="chakra-button emotion-21"
       disabled={false}
       type="submit"
     >

diff --git a/packages/core/test/__snapshots__/FormSnap.test.jsx.snap b/packages/core/test/__snapshots__/FormSnap.test.jsx.snap
@@ -97,6 +97,12 @@ exports[`single fields checkboxes field 1`] = `
   <div
     className="form-group field field-array"
   >
+    <label
+      className="control-label"
+      htmlFor="root"
+    >
+      An enum list rendered as checkboxes
+    </label>
     <div
       className="checkboxes"
       id="root"

diff --git a/packages/core/testSnap/formTests.tsx b/packages/core/testSnap/formTests.tsx
@@ -268,6 +268,7 @@ export default function formTests(Form: ComponentType<FormProps>, customOptions:
     test('checkboxes field', () => {
       const schema: RJSFSchema = {
         type: 'array',
+        title: 'An enum list rendered as checkboxes',
         items: {
           type: 'string',
           enum: ['foo', 'bar', 'fuzz', 'qux'],

diff --git a/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap
@@ -195,7 +195,9 @@ exports[`single fields checkboxes field 1`] = `
   >
     <label
       className="ms-Label root-130"
-    />
+    >
+      An enum list rendered as checkboxes
+    </label>
     <div
       className="ms-Checkbox is-enabled root-201"
     >

diff --git a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap
@@ -215,7 +215,9 @@ exports[`single fields checkboxes field 1`] = `
       <label
         className="MuiFormLabel-root"
         htmlFor="root"
-      />
+      >
+        An enum list rendered as checkboxes
+      </label>
       <div
         className="MuiFormGroup-root"
         id="root"

diff --git a/packages/mui/test/__snapshots__/Form.test.tsx.snap b/packages/mui/test/__snapshots__/Form.test.tsx.snap
@@ -1011,7 +1011,9 @@ exports[`single fields checkboxes field 1`] = `
       <label
         className="MuiFormLabel-root MuiFormLabel-colorPrimary emotion-1"
         htmlFor="root"
-      />
+      >
+        An enum list rendered as checkboxes
+      </label>
       <div
         className="MuiFormGroup-root emotion-2"
         id="root"

diff --git a/packages/semantic-ui/test/__snapshots__/Form.test.tsx.snap b/packages/semantic-ui/test/__snapshots__/Form.test.tsx.snap
@@ -276,6 +276,12 @@ exports[`single fields checkboxes field 1`] = `
     <div
       className="grouped equal width fields"
     >
+      <h5
+        className="ui dividing header"
+        id="root__title"
+      >
+        An enum list rendered as checkboxes
+      </h5>
       <div
         className="grouped fields"
         id="root"