RadioGroup, Select, DatePicker, DateRangePicker, TimeField validation behaviour changed from v 1.4.0 to v1.5.0

[janaHehr]

Provide a general summary of the issue here

The following components changed their validation behaviour when they are marked as required:

• RadioGroup
• Select
• DatePicker
• DateRangePicker
• TimeField

An required <Select isRequired/> does not trigger the validation when no entry is selected. The validate function is only called when an entry is selected.

import {
  Form,
  FieldError,
  Button,
  SelectValue,
  Popover,
  ListBox,
  ListBoxItem,
  Label,
  Key,
  Select,
} from "react-aria-components";

export default function App() {
  function validate(value: Key) {
    console.log("val select", value, value);
    if (!value) return "Choose wisely!";
  }

  return (
    <div className="App">
      <Form>
        <Select name="animal" isRequired validate={validate}>
          <Label>Favorite Animal</Label>
          <Button>
            <SelectValue />
            <span aria-hidden="true">▼</span>
          </Button>
          <div style={{ color: "red" }}>
            <FieldError />
          </div>
          <Popover>
            <ListBox>
              <ListBoxItem>Dog</ListBoxItem>
              <ListBoxItem>Cat</ListBoxItem>
            </ListBox>
          </Popover>
        </Select>
        <Button type="submit">Submit</Button>
      </Form>
    </div>
  );
}

🤔 Expected Behavior?

The <Select/> component is also validated when no entry is selected.

😯 Current Behavior

From v 1.5.0 the validation is only called when an entry is selected. When no entry is selected the browser validation now kicks in. We need full control over the error message (because they are translated into a specific user language). In v < 1.5.0 the validation was executed also when no entry was selected.

Looking in the changelog the only component-related PR was this one: PR?

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Playground: https://codesandbox.io/p/sandbox/react-aria-component-select-forked-56kzsk?workspaceId=ws_kvjNaP9av9uABkCYVWUTZ
With v 1.4.0 the validation behaviour works when no entry is selected. Updating to v 1.5.0 or 1.6.0 changes this behaviour.

Version

1.5.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

iOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue.
The PR shared is only about types, it doesn't change any logic, so something else is likely the culprit here.

I updated the codesandbox to show that TextField works the same as it used to https://codesandbox.io/p/sandbox/react-aria-component-select-forked-vv9mqw?file=%2Fsrc%2FApp.tsx

[janaHehr]

I found other components

• RadioGroup
• Select
• DatePicker
• DateRangePicker
• TimeField

that changed their validation behaviour. I updated the issue description.

[reidbarber]

Looks like this was an intentional change included in #7368:

react-spectrum/packages/@react-stately/form/src/useFormValidationState.ts

Lines 92 to 94 in e48de37

	let clientError: ValidationResult | null = useMemo(() => {
	if (!validate || value == null) {
	return null;

You'll want to instead pass a function to FieldError like this: https://react-spectrum.adobe.com/react-aria/forms.html#customizing-error-messages

[janaHehr]

Thanks, @reidbarber - this works perfectly :)

[nathanforce]

Hey! Sorry to jump onto a closed issue here. What is the suggestion for components implemented with the use* hooks and a custom validate function? I was surprised to learn that specific components skip validation if the field is null and wonder if this was intentional.