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:
- 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.
- 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?
3 Answers, 1 is accepted
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
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
Iron
Rank 1
Veteran
Iron
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?
Rank 1
Veteran
Iron