fix: Remove duplicate title for SelectWidget and description for Chec…

…kboxWidget (#3655) Fixes #3594 - Updated `@rjsf/antd` to remove the duplicate title for `SelectWidget` and description for `CheckboxWidget` - Updated the snapshots due to the changes made above - Updated the `CHANGELOG.md` accordinglt
rjsf-team · May 10, 2023 · 1c045cc · 1c045cc
1 parent 3186c39
commit 1c045cc
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/antd
 
 - Fix [#3608](https://github.com/rjsf-team/react-jsonschema-form/issues/3608) by ensuring the root field is always wrapped in Form.Item
+- Fix [#3594](https://github.com/rjsf-team/react-jsonschema-form/issues/3594) by removing the duplicate title for `SelectWidget` and description for `CheckboxWidget`
 
 ## @rjsf/core
 

diff --git a/packages/antd/src/widgets/CheckboxWidget/index.tsx b/packages/antd/src/widgets/CheckboxWidget/index.tsx
@@ -2,8 +2,6 @@ import { FocusEvent } from 'react';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import {
   ariaDescribedByIds,
-  descriptionId,
-  getTemplate,
   labelValue,
   FormContextType,
   RJSFSchema,
@@ -22,29 +20,8 @@ export default function CheckboxWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: WidgetProps<T, S, F>) {
-  const {
-    autofocus,
-    disabled,
-    formContext,
-    id,
-    label,
-    hideLabel,
-    onBlur,
-    onChange,
-    onFocus,
-    readonly,
-    value,
-    registry,
-    options,
-    schema,
-    uiSchema,
-  } = props;
+  const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
-    'DescriptionFieldTemplate',
-    registry,
-    options
-  );
 
   const handleChange = ({ target }: CheckboxChangeEvent) => onChange(target.checked);
 
@@ -58,33 +35,18 @@ export default function CheckboxWidget<
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined,
   };
-  const description = options.description ?? schema.description;
-
   return (
-    <>
-      {!hideLabel && !!description && (
-        <div>
-          <DescriptionFieldTemplate
-            id={descriptionId<T>(id)}
-            description={description}
-            schema={schema}
-            uiSchema={uiSchema}
-            registry={registry}
-          />
-        </div>
-      )}
-      <Checkbox
-        autoFocus={autofocus}
-        checked={typeof value === 'undefined' ? false : value}
-        disabled={disabled || (readonlyAsDisabled && readonly)}
-        id={id}
-        name={id}
-        onChange={!readonly ? handleChange : undefined}
-        {...extraProps}
-        aria-describedby={ariaDescribedByIds<T>(id)}
-      >
-        {labelValue(label, hideLabel, '')}
-      </Checkbox>
-    </>
+    <Checkbox
+      autoFocus={autofocus}
+      checked={typeof value === 'undefined' ? false : value}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onChange={!readonly ? handleChange : undefined}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {labelValue(label, hideLabel, '')}
+    </Checkbox>
   );
 }
diff --git a/packages/antd/src/widgets/SelectWidget/index.tsx b/packages/antd/src/widgets/SelectWidget/index.tsx
@@ -3,8 +3,6 @@ import {
   ariaDescribedByIds,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
-  getTemplate,
-  titleId,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
@@ -31,22 +29,16 @@ export default function SelectWidget<
   disabled,
   formContext = {} as F,
   id,
-  label,
-  hideLabel,
   multiple,
   onBlur,
   onChange,
   onFocus,
   options,
   placeholder,
   readonly,
-  registry,
-  schema,
-  uiSchema,
   value,
 }: WidgetProps<T, S, F>) {
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, options);
 
   const { enumOptions, enumDisabled, emptyValue } = options;
 
@@ -74,37 +66,32 @@ export default function SelectWidget<
     name: id,
   };
   return (
-    <>
-      {!hideLabel && !!label && (
-        <TitleFieldTemplate id={titleId<T>(id)} title={label} schema={schema} uiSchema={uiSchema} registry={registry} />
-      )}
-      <Select
-        autoFocus={autofocus}
-        disabled={disabled || (readonlyAsDisabled && readonly)}
-        getPopupContainer={getPopupContainer}
-        id={id}
-        mode={multiple ? 'multiple' : undefined}
-        onBlur={!readonly ? handleBlur : undefined}
-        onChange={!readonly ? handleChange : undefined}
-        onFocus={!readonly ? handleFocus : undefined}
-        placeholder={placeholder}
-        style={SELECT_STYLE}
-        value={selectedIndexes}
-        {...extraProps}
-        filterOption={filterOption}
-        aria-describedby={ariaDescribedByIds<T>(id)}
-      >
-        {Array.isArray(enumOptions) &&
-          enumOptions.map(({ value: optionValue, label: optionLabel }, index) => (
-            <Select.Option
-              disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1}
-              key={String(index)}
-              value={String(index)}
-            >
-              {optionLabel}
-            </Select.Option>
-          ))}
-      </Select>
-    </>
+    <Select
+      autoFocus={autofocus}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      getPopupContainer={getPopupContainer}
+      id={id}
+      mode={multiple ? 'multiple' : undefined}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      style={SELECT_STYLE}
+      value={selectedIndexes}
+      {...extraProps}
+      filterOption={filterOption}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map(({ value: optionValue, label: optionLabel }, index) => (
+          <Select.Option
+            disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1}
+            key={String(index)}
+            value={String(index)}
+          >
+            {optionLabel}
+          </Select.Option>
+        ))}
+    </Select>
   );
 }
diff --git a/packages/antd/test/__snapshots__/Array.test.tsx.snap b/packages/antd/test/__snapshots__/Array.test.tsx.snap
@@ -2530,14 +2530,6 @@ exports[`with title and description checkboxes 1`] = `
             <div
               className="ant-form-item-control-input-content"
             >
-              <label
-                className=""
-                htmlFor="root__title"
-                onClick={[Function]}
-                title="Test field"
-              >
-                Test field
-              </label>
               <div
                 aria-describedby="root__error root__description root__help"
                 className="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
@@ -3916,14 +3908,6 @@ exports[`with title and description from both checkboxes 1`] = `
             <div
               className="ant-form-item-control-input-content"
             >
-              <label
-                className=""
-                htmlFor="root__title"
-                onClick={[Function]}
-                title="My Field"
-              >
-                My Field
-              </label>
               <div
                 aria-describedby="root__error root__description root__help"
                 className="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
@@ -5302,14 +5286,6 @@ exports[`with title and description from uiSchema checkboxes 1`] = `
             <div
               className="ant-form-item-control-input-content"
             >
-              <label
-                className=""
-                htmlFor="root__title"
-                onClick={[Function]}
-                title="My Field"
-              >
-                My Field
-              </label>
               <div
                 aria-describedby="root__error root__description root__help"
                 className="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
@@ -6634,14 +6610,6 @@ exports[`with title and description with global label off checkboxes 1`] = `
             <div
               className="ant-form-item-control-input-content"
             >
-              <label
-                className=""
-                htmlFor="root__title"
-                onClick={[Function]}
-                title="Test field"
-              >
-                Test field
-              </label>
               <div
                 aria-describedby="root__error root__description root__help"
                 className="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"