[field controls] Respect validationMode

[atomiks]

Closes #1050

[mui-bot]

Netlify deploy preview

https://deploy-preview-1053--base-ui.netlify.app/

Generated by 🚫 dangerJS against e101083

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	23438c2
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67a346af2ef9000007216ac4
😎 Deploy Preview	https://deploy-preview-1053--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mj12albert]

Don't think it's directly related to this PR, but I couldn't make a required checkbox group because required is a prop on individual checkboxes but not on CheckboxGroup:

// a combination of the CheckboxGroup and Field demos
export default function FieldCheckbox() {
  return (
    <Field.Root>
      <Field.Label>Pick one or more</Field.Label>

      <CheckboxGroup defaultValue={[]}>
        <label>
          <Checkbox.Root name="fuji-apple">
            <Checkbox.Indicator>
              <CheckIcon />
            </Checkbox.Indicator>
          </Checkbox.Root>
          Fuji
        </label>

        <label>
          <Checkbox.Root name="gala-apple">
            <Checkbox.Indicator>
              <CheckIcon />
            </Checkbox.Indicator>
          </Checkbox.Root>
          Gala
        </label>

        <label>
          <Checkbox.Root
            name="granny-smith-apple"
          >
            <Checkbox.Indicator>
              <CheckIcon />
            </Checkbox.Indicator>
          </Checkbox.Root>
          Granny Smith
        </label>
      </CheckboxGroup>

      <Field.Error match="valueMissing">
        You must pick at least one
      </Field.Error>
    </Field.Root>
  );
}

[mj12albert]

https://codesandbox.io/p/sandbox/sweet-brattain-q9ptqr

When I make a required RadioGroup that has no initially checked radio and tab through it without checking any of the radios, it doesn't trigger an error state (I logged some stuff and it seems the validation functions are being called)

Also when the required RadioGroup is wrapped in a Form (with a submit button), if I click the submit button without touching the RadioGroup the error doesn't appear which could be the same issue?

However when a radio is checked, the console.log in the Form's submit handler doesn't log the value 🤔

[atomiks]

Are these bugs (with CheckboxGroup as well) related to this PR or are they on master as well? If on master, we can create a new issue for them to separate the work

[mj12albert]

Sounds good, I think it's just something wrong with validating a required field with certain types of values (non-string?)

[mj12albert]

Looks good, I tested all of the controls here with the validate function (because required+valueMissing wasn't consistent, likely a different bug) and the validationMode behavior seems consistent now:

<Field.Root
  className={styles.field.Field}
  validate={(value) => {
    if (value == null) {
      return 'You must pick something';
    }
    if (value === 'comic-sans') {
      return 'Comic Sans is not allowed';
    }
    return null;
  }}
>
  <Select.Root required>
    {/* rest of the select */}
  </Select.Root>
</Field.Root>

Side note: I think the using ValidityState terminology for the match prop isn't ideal, some of the values seem vague/unintuitive, e.g. match="badInput", match="valid"
Many users may end up just using a validate function on Field and match="customError" for everything just because of convenience (and because many form libraries are like this) CC @colmtuite

[atomiks]

Side note: I think the using ValidityState terminology for the match prop isn't ideal, some of the values seem vague/unintuitive, e.g. match="badInput", match="valid"
Many users may end up just using a validate function on Field and match="customError" for everything just because of convenience (and because many form libraries are like this) CC @colmtuite

I see your point - though in the most basic usage, it allows them to leverage the native HTML validation while still customizing the error message. e.g. <input pattern="..." /> without using JavaScript inside the validate function. Maybe it'd be more intuitive/obvious if each string was documented?