"Element menu" that behaves like a dropdown

[Martin]

I have a "list of components", rendered by a map. I have created a StackBlitz here: https://stackblitz.com/edit/react-ts-vieabu?file=index.tsx. Each "box" has a title div and a content div. When clicking on the title, the content should expand or collapse.

As you can see in the title I have a span with an image, which when clicked should display a dropdown menu. This menu has a couple of constraints that needs to be fulfilled:

• It should open/close on clicking the ellipsis.
• It should NOT open/close on hovering the ellipsis.
• It should always close when clicking outside the opened menu.

So it should behave more or less exactly like a regular <select> dropdown, but I also need to be able to have custom elements and styling for each option in the menu. I have tried two approaches:

1. I tried using the Menu component and using "openOnClick". The problem here is that I don't seem to be able to prevent opening on hover after every odd (first, third, fifth etc.) click.
2. I tried using the Popup component and having a <ul> as menu element, but here I cannot do it so it closes when clicking outside the menu. I tried adding a document.addEventListener('click', ...) to the BoxContainer component but that did not help or I did something wrong.

What would you say is the best approach here? Menu, Popup or something else?

[Stefan]

Hello, Martin,

Thank you for the details.

In this case, we can suggest checking the DropDownButton as it has the built-in logic to open and close based on the requirements:

https://www.telerik.com/kendo-react-ui-develop/components/buttons/dropdownbutton/

It has an option to style each item:

https://www.telerik.com/kendo-react-ui-develop/components/buttons/dropdownbutton/customization/

You can make the main button with an icon:

https://www.telerik.com/kendo-react-ui-develop/components/buttons/dropdownbutton/icons/

I hope this can prove helpful in this case.

Regards,
Stefan
Progress Telerik

[Martin]

Wow, totally missed that one. Thanks a lot! :D

[Martin]

Hello again, Stefan

It works almost as I want it but I have run into one problem. If I have the DropDownButton inside an element with an "onClick" I don't seem to be able to prevent the onclick on the parent element. Example:

<div onClick={myFunction}>
  <DropDownButton text="test" items={items} onItemClick={itemClickFunction} />
</div>

 

The onclick seems to happen on the parent element bot on the main button click and "onItemClick". The strange thing is that I have added a console.log in "myFunction" and that is not printed when opening/closing the dropdown or clicking an item. But the things that I want to happen in "myFunction" but not in "itemClickFunction" is still happening.

Any idea?

[Martin]

You can disregard this, I fixed it.