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.