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.