List item css ignored and background becomes transparent when mouse is over input field

[wwmike]

Hello!

I have a strange issue. once I hover over the input with the mouse, items go behind the layer below. Is this something the component does?

I simplified my item slot to a minimal one:

        <div slot="item" let:item >
            <!-- <ProfileCard user={item} /> -->
            <p class="text-sm font-medium text-gray-900 truncate profile-name py-11 z-50">
                {item.name}
            </p>
        </div>

but it didn't help. I don't have any custom :hover css.

This is how it looks when the mouse is over the input box:

And this is when it's somewhere else:

The issue is browser independent, Chrome and Firefox does it too, only difference is that it flickers in Chrome.

Thank you, Mihaly

[wwmike]

I found the issue.

It's kinda weird, the text, which popped up from behind was in a span, which had opacity-90, and it messed up the layer order.

Anyway, closing the issue as it seems like it's a rendering bug.