Listbox.Option does not accept ReactNode as children

[nboliver-ventureweb]

Summary

Docs say that ReactNode can be used as children, however, using anything other than a string breaks the layout.

There is a related community thread here:
https://community.shopify.com/c/shopify-apps/polaris-components-combobox-listbox-option-cannot-use-react-node/m-p/2603736#M79181

Expected behavior

You should be able to use any ReactNode as a Listbox.Option child. This will allow custom content in the listbox.

Actual behavior

Adding custom children breaks the layout. If you try to add styled children, it somewhat works, but the accessibility / keyboard controls don't work.

Steps to reproduce

Create a Listbox.Option with custom children:

<Listbox.Option
  key={`${variantId}`}
  value={variantId}
  selected={isSelected}
  accessibilityLabel={title}
>

  <Box width="100%">
    <Text as="p" variant="bodyXs">
      {group}
    </Text>
    {title}
  </Box>
</Listbox.Option>

See the layout is broken:

Are you using React components?

Yes

Polaris version number

@shopify/[email protected]

Browser

Chrome

Device

Macbook Pro

[MichaScant]

Hello, I can work on this issue