Closed mazzucchelli closed 1 month ago
1.14.1
onReachEnd function is not triggered in SimpleMenu component when the user scrolls to the bottom
onReachEnd
SimpleMenu
add this example in docs/stories/v2/SimpleMenu.stories.tsx
docs/stories/v2/SimpleMenu.stories.tsx
export const InfinityScrollMenu = { render: () => { const items = [ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [11, 12, 13, 14, 15, 16, 17, 18, 19, 20], [21, 22, 23, 24, 25, 26, 27, 28, 29, 30], ]; const [pages, setPages] = useState(1); const itemsToRender = items.slice(0, pages).flat(); const handleOnReachEnd = () => setPages((prev) => (prev < items.length ? prev + 1 : prev)); return ( <SimpleMenu label="Actions" onReachEnd={handleOnReachEnd}> {itemsToRender.map((item) => ( <MenuItem key={item} onSelect={() => console.log('item clicked')}> {item} </MenuItem> ))} </SimpleMenu> ); }, name: 'infinity scroll menu', } satisfies Story;
Only options from 1 -> 10 are rendered
1 -> 10
Should render options 1 -> 30
1 -> 30
Possible fix:
Seems like Menu.Content is missing the ref prop in packages/strapi-design-system/src/v2/SimpleMenu/SimpleMenu.tsx:64
Menu.Content
packages/strapi-design-system/src/v2/SimpleMenu/SimpleMenu.tsx:64
<Menu.Root onOpenChange={handleOpenChange}> <Menu.Trigger {...props}>{props.label}</Menu.Trigger> <Menu.Content ref={contentRef} intersectionId={intersectionId} popoverPlacement={popoverPlacement}> {children} </Menu.Content> </Menu.Root>
fixed by https://github.com/strapi/design-system/pull/1748
What version of strapi-design-system are you using?
1.14.1
What's Wrong?
onReachEnd
function is not triggered inSimpleMenu
component when the user scrolls to the bottomTo Reproduce
add this example in
docs/stories/v2/SimpleMenu.stories.tsx
Only options from
1 -> 10
are renderedExpected Behaviour
Should render options
1 -> 30
Possible fix:
Seems like
Menu.Content
is missing the ref prop inpackages/strapi-design-system/src/v2/SimpleMenu/SimpleMenu.tsx:64