Context menu / right-click menu best practices?

[LoganDark]

Hello, I'm just getting started with React and Headless UI, and I'm not sure which Headless UI component would be best for a right-click menu. Perhaps Menu or Popover? Are there any good libraries to help with this as well?

[LoganDark]

Looks like there's no way to access the internal state of the Menu at least. No way to open it to activate the FocusTrap and no way to have it close when you click outside. So I will have to implement both myself...

It's a real shame that nobody can seem to figure out how to use this library to achieve a simple context menu. I wish the building blocks of headlessui were separate packages so I could make my own components with keybinds and focustraps and whatnot, but those are all completely private implementation details because of course they are.

[LoganDark]

In regards to other component libraries, Headless UI is almost the only one of its kind. It's the only one that does not bring its own classes and its own CSS. You can absolutely find other libraries for individual components - for example, I plan on adding downshift in the future - but not a toolkit (no matter how small). Especially since things like radio buttons don't usually come in their own libraries.

It fits a different niche than full-featured libraries like ant/material design, which makes it even more sad that it does a subpar job of filling said niche. There aren't many alternatives out there (certainly none that I can list off the top of my head).

[AdnanTheExcellent]

+1 would love to see the ability to use a headlessui component as a right clickable context menu. There seems to be a pretty big gap in good and maintained context menu libraries for javascript. Most of the ones i find on github are outdated and / or unmaintained.

[LoganDark]

It doesn't look like headlessui is looking into supporting more use cases. Just their own. Same with heroicons - they're not even accepting pull requests.

Tailwind seems to be the only project that is being actively developed. That, and Tailwind UI, their paid offering.

[inwardmovement]

@LoganDark if you're looking for flexibility/customizability, you should check out AlpineUI.

[LoganDark]

@LoganDark if you're looking for flexibility/customizability, you should check out AlpineUI.

I left the team I was working with about 2-3 months ago.

Even if I were still on the project, AlpineUI wouldn't be an option for many reasons. One of those reasons is that it's not React-compatible, so I'd have to create manual wrappers around every component. It's not a huge deal in terms of programmer effort, but the fact that it does so much DOM manipulation outside of React is pretty much a no-no. Libraries like FlexLayout try hard to treat React components correctly even though they are mostly vanilla JS, but AlpineUI does not, and does not properly support the props system.

On top of that, the price isn't something I (or the team) would've been willing to pay. We developed the app on a budget of $0, and it eventually got scrapped anyway.

With that said, HeadlessUI is not going to be an option either in the future. It includes nice primitives like focus utilities, seem to be higher quality than any other library out there - too bad they're private implementation details, used to implement opinionated components that can't be configured to do what you want.

I think I'm done with React for the time being.

[designbyadrian]

Headless UI mention positioning their Popover component using Popper JS, see https://headlessui.com/react/popover#positioning-the-panel

In turn, Popper has "virtual elements" which can be used as popper targets. Combine the knowledge of these two to achieve your goal.

[LoganDark]

I used Popper to position my context menu. I couldn't use Popover, though, because it can only be activated by left click on a button element. There is a huge encapsulation issue with Headless UI. It is too encapsulated.

[methyl]

@LoganDark check this out: #1966. Feel free to use the fork, I'm going to maintain it for the time being ("@headlessui/react": "BusinessModelFoundry/headlessui" should work)

[LoganDark]

@methyl Unfortunately I no longer work on the piece of software that I needed Headless UI for, but it's great to see that you're taking steps towards making it more suitable for these use-cases in the future!

[x-ji]

You can just put a React ref on the Menu.Button (which is empty and thus doesn't show up in the UI) and trigger the click event via the ref upon the onContextMenu event (i.e. upon right click) of the target element. I don't see it as a huge "encapsulation issue" as you've been claiming here.

https://react.dev/learn/manipulating-the-dom-with-refs

[LoganDark]

What button?

Am I just supposed to create a hidden button just so I can call .click() on it when a user opens the context menu?

Respectfully, what the fuck?

[x-ji]

lmao why the hell are you so aggressive towards somebody posting a solution to the topic under discussion? This is completely uncalled for.

[LoganDark]

lmao why the hell are you so aggressive towards somebody posting a solution to the topic under discussion? This is completely uncalled for.

That wasn't meant to be aggressive, I just don't understand why I should have to create and click a hidden button to open a context menu.

Anyway, I'm unsubscribing from this issue since I no longer work on that project and Tailwind Labs doesn't seem interested in addressing this.

[sho052]

@LoganDark And I don't think there's a need for you to block me from replying here either, as I was still typing out a longer response on the topic and didn't engage in personal attack or whatnot. (This is another account I have. Let me finish up what I had been typing here.)

I mean, I can understand it if you don't want to have a hidden button as it doesn’t conform to the DOM semantics. Also, to you this solution was probably obvious, but not what you needed at all, so I can imagine if you'd be somewhat annoyed at the way I explained it. If so, my bad. I hope you can understand though, this might be obvious to you, but not necessarily to others with less experience who had the same question while using HeadlessUI, like me who came across this post while searching online.

While I understand if you don't want to use products from Tailwind Labs anymore as you explained here (it's your freedom to choose and I also can't fix this issue), somebody else might still find this solution/workaround useful if they choose to stick with HeadlessUI for their project, regardless of how inelegant or "wrong" it is. This question still has value to the public even though you as the original submitter is no longer interested in it. Respectfully, I don't think you need to say "Respectfully, what the fuck?" here and react in such a way. You could have made your point normally and I would have taken it just fine.

[LoganDark]

@sho052 please leave me alone

[junwen-k]

I know this is not related to Headless UI, but do check out Radix UI's Context Menu as an alternative, it is fully accessible.

I switched from Headless UI to Radix UI ever since, because Radix UI have much more components to work with. :)