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?