fix(fieldset): support root conditionals for fieldsets

[sandrina-p]

Requires #18. Please review that one first. Then come back there.

This PR ensures that root conditionals (if) that have effects (then) in fieldsets are applied correctly.

Do not mix the two concepts:

• Scoped conditionals: Conditionals written inside a fieldset - that works fine.
• Conditionals to fieldsets: Root conditionals that affect a fieldset - the bug fixed in this PR.

Steps to replicate

Use the following JSON Schema to replicate the reported bug in our JSF playground:

1. Copy the schema below
2. Set high working hours (eg 40)

• Bug: All "perks.food" options are still visible. Expectation: The "no" should be hidden.

{
  "additionalProperties": false,
  "type": "object",
  "properties": {
    "work_hours_per_week": {
      "title": "Hours per week",
      "type": "number",
      "description": "Above 30 hours, the Perk>Food options change, and PTO is required.",
      "x-jsf-presentation": {
        "inputType": "number"
      }
    },
    "pto": {
      "title": "Time-off (days)",
      "type": "number",
      "x-jsf-presentation": {
        "inputType": "number"
      }
    },
    "perks": {
      "additionalProperties": false,
      "properties": {
        "food": {
          "oneOf": [
            {
              "const": "lunch",
              "title": "Lunch"
            },
            {
              "const": "dinner",
              "title": "Dinner"
            },
            {
              "const": "all",
              "title": "All",
              "description": "Every meal"
            },
            {
              "const": "no",
              "title": "No food"
            }
          ],
          "title": "Food",
          "type": "string",
          "x-jsf-presentation": {
            "inputType": "radio"
          }
        },
        "retirement": {
          "oneOf": [
            {
              "const": "basic",
              "title": "Basic"
            },
            {
              "const": "plus",
              "title": "Plus"
            }
          ],
          "title": "Retirement",
          "type": "string",
          "x-jsf-presentation": {
            "inputType": "radio"
          }
        }
      },
      "required": ["food", "retirement"],
      "title": "Perks",
      "type": "object",
      "x-jsf-presentation": {
        "inputType": "fieldset"
      }
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "work_hours_per_week": {
            "minimum": 30
          }
        },
        "required": ["work_hours_per_week"]
      },
      "then": {
        "properties": {
          "pto": {
            "$comment": "@BUG: This description does not disappear once activated.",
            "description": "Above 30 hours, the PTO needs to be at least 20 days.",
            "minimum": 20
          },
          "perks": {
            "properties": {
              "food": {
                "description": "Above 30 hours, the 'no' option disappears.",
                "oneOf": [
                  {
                    "const": "lunch",
                    "title": "Lunch"
                  },
                  {
                    "const": "dinner",
                    "title": "Dinner"
                  },
                  {
                    "const": "all",
                    "title": "all"
                  }
                ]
              }
            }
          }
        },
        "required": ["pto"]
      }
    }
  ],
  "required": ["perks", "work_hours_per_week"]
}

How to test this:

• Read Linear issue (private)
• Check the unit tests and code comments. My apologies for not having a Loom here.

Tip for Remoters: To quickly preview this branch in our Playground, go to useCreateHeadlessForm.js (our internal hook), and replace the first line:

// This assumes the JSF repo is in the same folder as our internal FE repo.
- import { createHeadlessForm } from '@remoteoss/json-schema-form';
+ import { createHeadlessForm } from '@/src/../../json-schema-form/src';

---

[brennj]

One thing I'm struggling to understand going through the example

Why are the required messages not showing up? Is this an issue just with our components? But we know radio fields definitely have required error messages when needed 🤔 I'm nearly certain i've seen them in fieldsets too.

Still looking through this

[posthardcode]

One thing I'm struggling to understand going through the example

Why are the required messages not showing up? Is this an issue just with our components? But we know radio fields definitely have required error messages when needed 🤔 I'm nearly certain i've seen them in fieldsets too.

Still looking through this

@brennj I have encountered this issue where the required message didn't show up, only the "invalid" one. I didn't look into the cause (since the actual issue was something else), but this thread might help.

[brennj]

I think we'll be good to merge this one in itself, but pending we fix the other branch first

[brennj]

just need to change this and i think we're all good :)

[sandrina-p]

I think we'll be good to merge this one in itself, but pending we fix the other branch first

Cool! Let me wrap up the #18 first and then I'll come back to this one.

[sandrina-p]

#18 merged, let me rebase this one, it will take a few minutes, as this is a branch of branch 👀

[brennj]

on standby!

[sandrina-p]

Ah, I can't rebase as Gabriel has used merged before, so I used merge too. Easy and quick. it's whatever as we'll squash it all afterward.

I've also reverted the -dev version with npm run version_as_main

[brennj]

lets gooo