RAC `TagGroup` within a `ComboBox` causes a crash in 1.3.1

Niznikr commented 4 months ago

Provide a general summary of the issue here

TagGroup within a ComboBox causes a crash in 1.3.1. Attempting to create a multi-select experience but it seems even trying to render the TagGroup breaks with a message Cannot destructure property 'onAction' of .... Guessing the issue is ComboBox and TagGroup both using ListStateContext. Note it happens both inside and outside the Group.

🤔 Expected Behavior?

TagGroup can exist within a ComboBox and not have errors resulting from context state issues.

😯 Current Behavior

TagGroup breaks within a ComboBox.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

<ComboBox>
  <Label>Label</Label>
  <Group>
    <TagGroup>
      <TagList>
        <Tag>One</Tag>
      </TagList>
    </TagGroup>
    <Input />
    <Button />
  </Group>
  <Popover>
    <ListBox>
      <ListBoxItem>Item one</ListBoxItem>
    </ListBox>
  </Popover>
</ComboBox>

Version

1.3.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

yihuiliao commented 4 months ago

Seems similar to https://github.com/adobe/react-spectrum/issues/6757 where we had to clear the ListStateContext

kvnxiao commented 3 months ago

Also encountering this issue

kvnxiao commented 2 months ago

Any updates to this issue? @yihuiliao Or if there's a pointer to which file is causing this issue that we can address

snowystinger commented 2 months ago

I think I'd recommend moving the TagGroup outside the Combobox for now, we never really intended this combination. You can create a group and style it to look like one cohesive component still.

... track both lists out here
... ref to root div can allow you to set the combobox popover width appropriately

<div role="group" aria-label="tag field" // style with border that looks like a textfield>
    <TagGroup>
      <TagList>
        <Tag>One</Tag>
      </TagList>
    </TagGroup>
<ComboBox>
  <Label>Label</Label>
  <Group>
    <Input />
    <Button />
  </Group>
  <Popover>
    <ListBox>
      <ListBoxItem>Item one</ListBoxItem>
    </ListBox>
  </Popover>
</ComboBox>
</div>

Otherwise, you could possibly wrap your TagGroup in a Provider and null out certain contexts

<ComboBox>
  <Label>Label</Label>
  <Group>
<Provider [ListStateContext, null]> // any other relevant ones
    <TagGroup>
      <TagList>
        <Tag>One</Tag>
      </TagList>
    </TagGroup>
</Provider>
    <Input />
    <Button />
  </Group>
  <Popover>
    <ListBox>
      <ListBoxItem>Item one</ListBoxItem>
    </ListBox>
  </Popover>
</ComboBox>

I'm not sure the list of them you'd need to clear, you'd need to check the docs and see which ones overlap https://react-spectrum.adobe.com/react-aria/ComboBox.html#custom-children https://react-spectrum.adobe.com/react-aria/TagGroup.html#custom-children

adobe / react-spectrum