Controlled react-aria-components Select cannot be nulled

[pzaczkiewicz-athenahealth]

Provide a general summary of the issue here

When supplying a null selectedKey to Select, the HiddenSelect retains its last selected key. This can occur if a value was previously selected, then cleared out via selectedKey getting set to null. This causes the form to be submitted with the previously selected value, even if the field is required. Root cause appears to be value: state.selectedKey ?? undefined,, as it's not distinguishing between null and undefined.

🤔 Expected Behavior?

Form does not submit, as it has a null, required field

😯 Current Behavior

Form submits with previously selected value instead of the currently-displayed null value.

💁 Possible Solution

In useHiddenSelect, use state.selectedKey ?? '' instead

🔦 Context

We've provided a button to clear out form values via controlled state. If this feature is used, inaccurate data could potentially be submitted.

🖥️ Steps to Reproduce

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

export const WithAriaSelect = (): ReactElement => {
  const [selectedKey, setSelectedKey] = useState<Key | null>(null);
  return (
    <Form>
      <Button onPressEnd={() => setSelectedKey(null)}>Reset state</Button>
      <Select isRequired selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
        <Label>Favorite Animal</Label>
        <Button>
          <SelectValue />
          <span aria-hidden="true">▼</span>
        </Button>
        <Popover>
          <ListBox>
            <ListBoxItem>Aardvark</ListBoxItem>
            <ListBoxItem>Cat</ListBoxItem>
            <ListBoxItem>Dog</ListBoxItem>
            <ListBoxItem>Kangaroo</ListBoxItem>
            <ListBoxItem>Panda</ListBoxItem>
            <ListBoxItem>Snake</ListBoxItem>
          </ListBox>
        </Popover>
        <FieldError />
      </Select>
      <Button type="submit">Submit</Button>
    </Form>
  );
};

Select a value, click the "Reset state" button, Submit

Version

[email protected]

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

Athenahealth/Forge

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue.

That was the value we used to use, however, it created some problems for autocomplete https://github.com/adobe/react-spectrum/commit/beb8bd56628c98b0078a8384081a0db49ed57b0f

We'll need to resolve this.

[fnberta]

I'm hitting this as well. @pzaczkiewicz-athenahealth did you find a workaround until this is fixed?

[snowystinger]

looks like we can't workaround it with the context based approach either https://react-spectrum.adobe.com/react-aria/Select.html#composition I see the same behaviour there as well https://codesandbox.io/p/sandbox/sj2zlz?file=%2Fsrc%2FApp.js%3A37%2C21

[pzaczkiewicz-athenahealth]

No, I haven't found a workaround either.