react
react copied to clipboard
SelectPanel bug when we have static items list is inside same component
Description
SelectPanel works buggy when we have static items list inside same component.
I just copy/paste the code of the selectpanel example from https://primer.style/components/selectpanel/react/alpha
export default function Home() {
return (
<>
<SelectorDemo />
</>
);
}
function SelectorDemo() {
const items = [
{text: 'enhancement', description: 'Something to enhancement', id: 1},
{text: 'bug', description: `Something isn't working`, id: 2},
]
const [selected, setSelected] = React.useState<ItemInput[]>([])
const [filter, setFilter] = React.useState('')
const filteredItems = items.filter((item) => item.text.toLowerCase().startsWith(filter.toLowerCase()))
const [open, setOpen] = useState(false)
return (
<>
<h1>Multi Select Panel</h1>
<SelectPanel
title="Select labels"
subtitle="Use labels to organize issues and pull requests"
renderAnchor={({
children,
'aria-labelledby': ariaLabelledBy,
...anchorProps
}) => (
<Button
trailingAction={TriangleDownIcon}
aria-labelledby={` ${ariaLabelledBy}`}
{...anchorProps}
aria-haspopup="dialog"
>
{children ?? 'Select Labels'}
</Button>
)}
placeholderText="Filter labels"
open={open}
onOpenChange={setOpen}
items={filteredItems}
selected={selected}
onSelectedChange={setSelected}
onFilterChange={setFilter}
showItemDividers={true}
overlayProps={{
width: 'small',
height: 'xsmall',
}}
/>
</>
)
}
But got the following issue, now it works as expected if I move items array outside the component and pass it as component params, but I just wanted to post it here to track the behaviour, I think that is valid scenario to have a selepanel with static items in same component and not always the items will be passed to the component. See video below.
https://github.com/primer/react/assets/205721/f970eb6e-11ea-4456-b7bb-f78163febf49
Regards.
Steps to reproduce
- Clone repo https://github.com/eriknyk/primer-demo.git
- Run: npm run dev
- See how bun in SelectPanel component
Version
36.25.0
Browser
Chrome