How to make Select work with custom ListBox?

[evgeny-kim]

I'm trying to swap ListBox and ListBoxItem with a custom component that renders to <ul> and <li>.

While the list works fine outside Select, I cannot make them work together.

What am I missing?

https://codesandbox.io/p/devbox/cool-rgb-4yzz4r?file=%2Fsrc%2FApp.jsx

import React from 'react';
import { mergeProps, useFocusRing, useListBox, useOption } from 'react-aria';
import {
    Button,
    Label,
    ListBoxContext,
    Popover,
    Select,
    SelectValue,
    useContextProps
} from 'react-aria-components';
import { Item, useListState } from 'react-stately';

const UnorderedList = (props) => {

    let ref = React.useRef();
    [props, ref] = useContextProps(props, ref, ListBoxContext);
    let state = useListState(props);

    let { listBoxProps } = useListBox(props, state, ref);

    return (
        <ul {...listBoxProps} ref={ref}>
            {[...state.collection].map((item) => {
                return (
                    <ListItem key={item.key} item={item} state={state} />
                );
            })}
        </ul>
    );
};

const ListItem = ({ item, state }) => {

    let ref = React.useRef();
    let { optionProps } = useOption({ key: item.key }, state, ref);
    let { isFocusVisible, focusProps } = useFocusRing();

    return (
        <li
            {...mergeProps(optionProps, focusProps)}
            ref={ref}
            data-focus-visible={isFocusVisible}>
            {item.rendered}
        </li>
    );

};

const App = () => {
    return (
        <Select>
            <Label>Select:</Label>
            <Button>
                <SelectValue />
            </Button>
            <Popover>
                <UnorderedList>
                    <Item>foo</Item>
                    <Item>bar</Item>
                    <Item>baz</Item>
                </UnorderedList>
            </Popover>
        </Select>
    );
}

export default App;

[snowystinger]

I think this will be easier after our next release when we make it easier to build your own Collections. I'm not sure what exactly is missing from here, because it looks pretty different to our implementation, but you could start by comparing to our implementation of ListBox. You could (again, more easily after our coming release) copy our ListBox implementation entirely and change the parts you need.

My best guess is a mismatch between collections. Our hooks documentation still uses an older version of collections, while RAC is on a newer one and they wont work together. We'll be updating our hooks documentation in the future to show how to use the new collections.

[evgeny-kim]

Thanks for the hint! While it's possible it doesn't look straightforward to me since current ListBox implementation relays on Collection internals.