I am using “@headlessui/react”: “^1.7.18” and I am trying to implement a smooth Transition for a checkbox to appear when an item is selected, similar to this example.

In headlessui/react float, when the menu is opened, what is the way to prevent it from closing when you click outside it?

In a React app, I use HeadlessUI Dialog to display an item preview from a list.
Using keyboard arrows left / right should trigger the display of the next / prev item from the list.

This is one of my tabs:

I have a button and when clicked, it opens an overlay that takes up the entire screen except it still shows the nav bar. I am trying to have a fade in/fade out effect when the overlay shows up but it’s not working. (Ideally, it should also come up from the bottom but I need just any transition to work now). I was looking through the docs and I need to make sure my components forward refs but I’m not sure what I’m doing wrong. This is the code snipped with the button which opens the overlay: