ComboBox doesn't validate controlled input

[mversic]

Provide a general summary of the issue here

1. When ComboBox is used inside a Form
2. and if the selectedKey is null, but inputValue is given an invalid value
3. the enclosing Form doesn't validate that a key is selected

🤔 Expected Behavior?

1. When ComboBox is used inside a Form
2. and if the selectedKey is null, but inputValue is given an invalid value
3. the enclosing Form prevents submission of invalid value

😯 Current Behavior

as described in the summary

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

This is just a very simple reproduction. Pressing submit button will submit the form although no key is selected:

<Form>
  <ComboBox isRequired selectedKey={null} inputValue="Phoenix">
    <Label>Favorite Animal</Label>
    <div>
      <Input />
      <Button>▼</Button>
    </div>
    <Popover>
      <ListBox>
        <ListBoxItem>Cat</ListBoxItem>
        <ListBoxItem>Dog</ListBoxItem>
      </ListBox>
    </Popover>
  </ComboBox>
  <Button type="submit">Submit</Button>
</Form>

Version

"reac-aria-components": "^1.10.1",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

Pressing submit button will submit the form although no key is selected:

I think you are missing the isRequired prop?

[mversic]

you're right. I've updated the example. The issue still stands