Bootstrap 5.3 dropdown links are not working on mobile safari

Question

I have a search input and I'm triggering the live search results div when I focus on search input. Results list works perfectly on desktop but even though it renders correctly on mobile phone, list links are not clickable. When I click to link, it closes the results div.

But I when long press to the link, it shows me if I want to open the link in a new tab. Normally it should open the link directly.

This the HTML code:

<div class="search-list">
<ul class="dropdown-menu show" data-bs-popper="static" role="menu">
    @foreach($results as $result)
        <li><a class="dropdown-item" href="{{route('PostShow', $result->id)}}">{{$result->title}}</a></li>
    @endforeach

    @foreach($movies as $movie)
        <li>
            @if($movie['poster_path'])
                <a class="dropdown-item" href="{{route('Movies.show', $movie['id'])}}">
                    {{$movie['title']}} ({{date('Y', strtotime($movie['release_date']))}})
                </a>
            @else
                <a class="dropdown-item" href="{{route('Movies.show', $movie['id'])}}">
                    <img src="{{asset('images/no-poster.png')}}" alt="" style="width: 20px">
                    {{$movie['title']}} ({{date('Y', strtotime($movie['release_date']))}})
                </a>
            @endif
        </li>
    @endforeach

    @foreach($actors as $actor)
        <li>
            @if($actor['profile_path'])
                <a class="dropdown-item" href="{{route('Actors.show', $actor['id'])}}">
                    {{$actor['name']}}
                </a>
            @else
                <a class="dropdown-item" href="{{route('Actors.show', $actor['id'])}}">
                    <img src="{{asset('images/no-profile.png')}}" alt="" style="width: 20px">
                    {{$actor['name']}}
                </a>
            @endif
        </li>
    @endforeach
</ul>

This is my CSS code:

.dropdown-menu {
border: none;
background-color: rgba(14, 14, 19, 0.9);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.dropdown-menu::after {
content: "";
position: absolute;
border-radius: 8px;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(7px) !important;
z-index: -1;
}
.dropdown-item {
border-radius: 3px;
text-wrap: pretty;
}
.navbar-search {
position: relative;
}
.search-list {
display: none;
position: absolute;
min-width: 250px;
max-width: 250px;
text-wrap: pretty;
top: 100%;
left: 0;
margin-top: 8px;
z-index: 1000;
}
.navbar-search:focus-within .search-list {
display: block;
}

You can check what I mean from this link. Thanks in advance for any help.

Answer 1

.navbar-search:focus-within .search-list {
    display: block;
}

Was broking the code. Hiding the class with Js solved my problem.