ComboBox: selectionMode="multiple" + allowsCustomValue clears all selected keys on Escape, Enter, and Tab

[supertosse]

Provide a general summary of the issue here

When a ComboBox is configured with both selectionMode="multiple" and allowsCustomValue,
all previously selected keys are cleared if the user types something in the input and then
presses Escape, Enter, or Tab.

🤔 Expected Behavior?

Pressing Escape, Enter, or Tab should close/commit the input without affecting previously
selected items. The selected keys should remain unchanged unless the user explicitly
deselects an item.

😯 Current Behavior

After typing in the input:

• Pressing Escape clears all selected keys (resets selection to empty)
• Pressing Enter clears all selected keys
• Pressing Tab clears all selected keys

This does not occur when allowsCustomValue is omitted — the bug is specific to the
combination of selectionMode="multiple" + allowsCustomValue.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Render a ComboBox with selectionMode="multiple" and allowsCustomValue
2. Select two or more items (e.g. Norway and Sweden)
3. Click the input and type any partial string (e.g. "den")
4. Press Escape (or Enter, or Tab)

Expected: selected keys remain [no, se]
Actual: selected keys are cleared (empty selection)

Minimal reproduction:

  import { Button, ComboBox, ComboBoxValue, Input, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components';

  const countries = [
    { id: 'no', label: 'Norway' },
    { id: 'se', label: 'Sweden' },
    { id: 'dk', label: 'Denmark' },
  ];

  function Example() {
    return (
      <ComboBox
        selectionMode="multiple"
        defaultValue={['no', 'se']}
        allowsCustomValue
      >
        <Label>Country</Label>
        <div style={{ display: 'flex' }}>
          <Input />
          <Button>▼</Button>
        </div>
        <ComboBoxValue>
          {({ selectedItems, isPlaceholder }) =>
            isPlaceholder
              ? 'None selected'
              : `Selected: ${selectedItems.map(item => item?.id).join(', ')}`
          }
        </ComboBoxValue>
        <Popover>
          <ListBox items={countries}>
            {item => <ListBoxItem id={item.id}>{item.label}</ListBoxItem>}
          </ListBox>
        </Popover>
      </ComboBox>
    );
  }

Version

1.16.0

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

[snowystinger]

What does allowsCustomValue look like for a multiple selection? It doesn't have a representation in the combobox, so what should happen on Enter or Tab when the value is committed?

[supertosse]

What does allowsCustomValue look like for a multiple selection? It doesn't have a representation in the combobox, so what should happen on Enter or Tab when the value is committed?

What we need it for are things like email addresses. You can choose from a list of contacts or enter a new one. There will be chips to represent the selected values. When you hit enter, a new item and chip is added, selected and the input will be cleared.

[federicocappellotto97]

I also noticed that if i select an existing option both onChange and onInputChange are triggered. Instead the docs says "Both inputValue and value can be controlled simultaneously. However, each interaction will only trigger either onInputChange or onChange, not both. When controlling both props, you must update both values accordingly."

This is causing problems to me because i need to get the id of the options and the text of the custom options, instead in this way i always get text

[snowystinger]

Thanks for the use case, a workaround may exist, can you put a key down capturing listener on the input and save the value on Enter that way?
Will need my coworker's combobox expertise for the other question about onChange and onInputChange.

[LFDanLu]

@federicocappellotto97 mind sharing a code sandbox or reproduction so I know what exact configuration of ComboBox is exhibiting this?

[supertosse]

I already tried onKeyDownCapture and it does work, but is a bit anoying to deal with. I have instead opted to create a patch file that changes comitCustomValue. I am creating a wrapper for your combobox as part of our component library, so I am trying to make it easy to use and avoid breaking changes. Do you think this is something you will look into any time soon? Thanks for quick response and a great component library!

[federicocappellotto97]

@federicocappellotto97 mind sharing a code sandbox or reproduction so I know what exact configuration of ComboBox is exhibiting this?

Hi @LFDanLu ! I just made a quick reproduction here: https://github.com/federicocappellotto97/react-aria-combobox-debug

As you can see when i select an item from popover both events are triggered

[LFDanLu]

@federicocappellotto97 Looks like your combobox isn't fully controlled (aka it doesn't have a value and inputValue set)? If you set those then it works as expected. If you aren't controlling both values, then you'll get multiple events from a single interaction

@supertosse multiselect custom value comboboxes was a bit of a question mark point for us when implementing this support in ComboBox. You mentioned it is for entering a new contact, is this via the "create new contact" in your screenshot? If so, is allowCustomValue strictly necessary since presumably you are adding the new contact via onAction?

[supertosse]

We are creating a component library, so there will be a range of needs for this, and the screenshot is just a dummy component for development. At least one of our teams needs a Gmail-like combobox, where you may search among contacts, but you can also enter a custom email, if you have no need to store the contact.
If you don't want to create official support, it would still be helpful if you just skip setting value to null when committing custom value with multiselect.

[LFDanLu]

Makes sense, I'll bring it up with the team and see what they think.

[LFDanLu]

The team is happy to field official support for this, would you like to open a PR?