strapi / design-system

Strapi.io's design system :rocket:
https://design-system.strapi.io
MIT License
453 stars 157 forks source link

[bug]: onReachEnd is not triggered in SimpleMenu component #1604

Closed mazzucchelli closed 1 month ago

mazzucchelli commented 7 months ago

What version of strapi-design-system are you using?

1.14.1

What's Wrong?

onReachEnd function is not triggered in SimpleMenu component when the user scrolls to the bottom

To Reproduce

add this example in 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

Expected Behaviour

Should render options 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.Root onOpenChange={handleOpenChange}>
  <Menu.Trigger {...props}>{props.label}</Menu.Trigger>
  <Menu.Content ref={contentRef} intersectionId={intersectionId} popoverPlacement={popoverPlacement}>
    {children}
  </Menu.Content>
</Menu.Root>
madhurisandbhor commented 1 month ago

fixed by https://github.com/strapi/design-system/pull/1748