fix(antd): disabled property of options of antd theme (#4216)

* fix: disabled property of options in CheckboxesWidget and RadioWidget of antd theme * chore: update CHANGELOG.md for #4216 * chore: update formTests * chore: update PULL_REQUEST_TEMPLATE.md for test * Update CHANGELOG.md --------- Co-authored-by: Heath C <[email protected]>
rjsf-team · Jun 28, 2024 · 3d851f4 · 3d851f4
1 parent 40ea3c4
commit 3d851f4
Show file tree

Hide file tree

Showing 14 changed files with 4,258 additions and 576 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,12 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 5.18.6
+
+## @rjsf/antd
+
+- Fix disabled property of options in CheckboxesWidget and RadioWidget ([#4216](https://github.com/rjsf-team/react-jsonschema-form/pull/4216))
+
 # 5.18.5
 
 ## @rjsf/antd

diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -11,7 +11,7 @@ If your PR is non-trivial and you'd like to schedule a synchronous review, pleas
 - [ ] **I'm updating documentation**
   - [ ] I've [checked the rendering](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing) of the Markdown text I've added
 - [ ] **I'm adding or updating code**
-  - [ ] I've added and/or updated tests. I've run `npm run test:update` to update snapshots, if needed.
+  - [ ] I've added and/or updated tests. I've run `npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update` to update snapshots, if needed.
   - [ ] I've updated [docs](https://rjsf-team.github.io/react-jsonschema-form/docs) if needed
   - [ ] I've updated the [changelog](https://github.com/rjsf-team/react-jsonschema-form/blob/main/CHANGELOG.md) with a description of the PR
 - [ ] **I'm adding a new feature**

diff --git a/packages/antd/src/widgets/CheckboxesWidget/index.tsx b/packages/antd/src/widgets/CheckboxesWidget/index.tsx
@@ -61,7 +61,7 @@ export default function CheckboxesWidget<
                 id={optionId(id, i)}
                 name={id}
                 autoFocus={i === 0 ? autofocus : false}
-                disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1}
+                disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
                 value={String(i)}
               >
                 {option.label}

diff --git a/packages/antd/src/widgets/RadioWidget/index.tsx b/packages/antd/src/widgets/RadioWidget/index.tsx
@@ -61,7 +61,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
             id={optionId(id, i)}
             name={id}
             autoFocus={i === 0 ? autofocus : false}
-            disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1}
+            disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
             key={i}
             value={String(i)}
           >

diff --git a/packages/antd/test/__snapshots__/Form.test.tsx.snap b/packages/antd/test/__snapshots__/Form.test.tsx.snap
@@ -2674,6 +2674,181 @@ exports[`single fields select field multiple choice enumDisabled 1`] = `
 </form>
 `;
 
+exports[`single fields select field multiple choice enumDisabled using checkboxes 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group field field-array"
+  >
+    <div
+      className="ant-form-item css-dev-only-do-not-override-1b0bdye"
+    >
+      <div
+        className="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
+        style={
+          {
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-1b0bdye"
+          style={{}}
+        >
+          <div
+            className="ant-form-item-control-input"
+          >
+            <div
+              className="ant-form-item-control-input-content"
+            >
+              <div
+                aria-describedby="root__error root__description root__help"
+                className="ant-checkbox-group css-dev-only-do-not-override-1b0bdye"
+                id="root"
+                name="root"
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <span>
+                  <label
+                    className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-1b0bdye"
+                    style={{}}
+                  >
+                    <span
+                      className="ant-checkbox ant-wave-target css-dev-only-do-not-override-1b0bdye"
+                    >
+                      <input
+                        autoFocus={false}
+                        checked={false}
+                        className="ant-checkbox-input"
+                        disabled={false}
+                        id="root-0"
+                        name="root"
+                        onChange={[Function]}
+                        type="checkbox"
+                        value="0"
+                      />
+                      <span
+                        className="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      foo
+                    </span>
+                  </label>
+                  <br />
+                </span>
+                <span>
+                  <label
+                    className="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-1b0bdye"
+                    style={{}}
+                  >
+                    <span
+                      className="ant-checkbox ant-wave-target css-dev-only-do-not-override-1b0bdye ant-checkbox-disabled"
+                    >
+                      <input
+                        autoFocus={false}
+                        checked={false}
+                        className="ant-checkbox-input"
+                        disabled={true}
+                        id="root-1"
+                        name="root"
+                        onChange={[Function]}
+                        type="checkbox"
+                        value="1"
+                      />
+                      <span
+                        className="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      bar
+                    </span>
+                  </label>
+                  <br />
+                </span>
+                <span>
+                  <label
+                    className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-1b0bdye"
+                    style={{}}
+                  >
+                    <span
+                      className="ant-checkbox ant-wave-target css-dev-only-do-not-override-1b0bdye"
+                    >
+                      <input
+                        autoFocus={false}
+                        checked={false}
+                        className="ant-checkbox-input"
+                        disabled={false}
+                        id="root-2"
+                        name="root"
+                        onChange={[Function]}
+                        type="checkbox"
+                        value="2"
+                      />
+                      <span
+                        className="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      fuzz
+                    </span>
+                  </label>
+                  <br />
+                </span>
+                <span>
+                  <label
+                    className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-1b0bdye"
+                    style={{}}
+                  >
+                    <span
+                      className="ant-checkbox ant-wave-target css-dev-only-do-not-override-1b0bdye"
+                    >
+                      <input
+                        autoFocus={false}
+                        checked={false}
+                        className="ant-checkbox-input"
+                        disabled={false}
+                        id="root-3"
+                        name="root"
+                        onChange={[Function]}
+                        type="checkbox"
+                        value="3"
+                      />
+                      <span
+                        className="ant-checkbox-inner"
+                      />
+                    </span>
+                    <span>
+                      qux
+                    </span>
+                  </label>
+                  <br />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    className="ant-btn css-dev-only-do-not-override-1b0bdye ant-btn-submit"
+    disabled={false}
+    onClick={[Function]}
+    style={{}}
+    type="submit"
+  >
+    <span>
+      Submit
+    </span>
+  </button>
+</form>
+`;
+
 exports[`single fields select field multiple choice formData 1`] = `
 <form
   className="rjsf"
@@ -3269,6 +3444,116 @@ exports[`single fields select field single choice enumDisabled 1`] = `
 </form>
 `;
 
+exports[`single fields select field single choice enumDisabled using radio widget 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group field field-string"
+  >
+    <div
+      className="ant-form-item css-dev-only-do-not-override-1b0bdye"
+    >
+      <div
+        className="ant-row ant-form-item-row css-dev-only-do-not-override-1b0bdye"
+        style={
+          {
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-1b0bdye"
+          style={{}}
+        >
+          <div
+            className="ant-form-item-control-input"
+          >
+            <div
+              className="ant-form-item-control-input-content"
+            >
+              <div
+                aria-describedby="root__error root__description root__help"
+                className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1b0bdye"
+                id="root"
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <label
+                  className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1b0bdye"
+                  style={{}}
+                >
+                  <span
+                    className="ant-radio ant-wave-target"
+                  >
+                    <input
+                      autoFocus={false}
+                      checked={false}
+                      className="ant-radio-input"
+                      disabled={false}
+                      id="root-0"
+                      name="root"
+                      onChange={[Function]}
+                      type="radio"
+                      value="0"
+                    />
+                    <span
+                      className="ant-radio-inner"
+                    />
+                  </span>
+                  <span>
+                    foo
+                  </span>
+                </label>
+                <label
+                  className="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1b0bdye"
+                  style={{}}
+                >
+                  <span
+                    className="ant-radio ant-wave-target ant-radio-disabled"
+                  >
+                    <input
+                      autoFocus={false}
+                      checked={false}
+                      className="ant-radio-input"
+                      disabled={true}
+                      id="root-1"
+                      name="root"
+                      onChange={[Function]}
+                      type="radio"
+                      value="1"
+                    />
+                    <span
+                      className="ant-radio-inner"
+                    />
+                  </span>
+                  <span>
+                    bar
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    className="ant-btn css-dev-only-do-not-override-1b0bdye ant-btn-submit"
+    disabled={false}
+    onClick={[Function]}
+    style={{}}
+    type="submit"
+  >
+    <span>
+      Submit
+    </span>
+  </button>
+</form>
+`;
+
 exports[`single fields select field single choice formData 1`] = `
 <form
   className="rjsf"