Autocomplete: backdrop isn't working as expected

[Holybasil]

When I was using Autocomplete, I wanted the user to be able to focus on the entire component when the dropdown menu opened, so I used the backdrop attribute in popoverProps. However, that's where the problem arose.

Simply adding backdrop: "opaque" won't work unless you also set isNonModal to false. Because there is isNonModal = true in use-popover.ts and it controls whether the backdrop content is rendered with the backdrop in free-solo-popover.tsx

popoverProps={{
    backdrop: "opaque",
    isNonModal: false,
}}

However, I can't see the backdrop content even if the two property values are set correctly. Because the backdrop content should be placed inside the outermost div of the popover, rather than becoming a sibling of this DOM element and being appended directly under the body.

which results in

Additionally, even if the backdrop is positioned correctly, the component will look like this

instead of

From my side, I prefer the latter one.

Could someone take a look? If this happens to align with what your team wants, I can submit a pr.

[Holybasil]

here is the codesandbox

[pablojsx]

Also backdrop from tailwind isn'tworking inside the navbar component

edit: I also noticed inset-0 isn't working properly either(inside the navbar)

[adnan-smlatic]

This helped me get the backdrop working, but then I couldn't close it, setting allowsCustomValue={true} on the autocomplete solved it. Just leaving it here if anyone has the same problem.

More at: #1987 (comment)