Tengo un modal que se carga con alpines cuando se hace clic en un botón, la cosa es que también desencadena un evento click.outside. ¿Hay alguna manera de evitar que esto suceda? He intentado encontrar una solución en línea pero no puedo encontrar nada, ¿alguien podría ayudar a un novato?
<div class="mt-12" x-data="{isTrailerModalVisible: false,}"> <button x-on:click="isTrailerModalVisible = true"; class="flex bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blue-600 rounded transition ease-in-out duration-150 items-center" > <i class="far fa-play-circle"></i> <div class="ml-2">Play Trailer</div> </button> <template x-if="isTrailerModalVisible"> <div x-show="isTrailerModalVisible" style="background-color: rgba(0, 0, 0, .5);" class="z-50 fixed top-0 left-0 w-full h-full flex items-center shadow-lg overflow-y-auto" > <div class="container mx-auto lg:px-32 rounded-lg overflow-y-auto"> <div class="bg-gray-300 rounded" > <div class="flex justify-end pr-4 pt-2"> <button @click="isTrailerModalVisible = false" @keydown.escape.window="isTrailerModalVisible = false" class="text-3xl leading-none hover:text-gray-300" > × </button> </div> <!--Finish the clicked away for closing the modal--> <div class="modal-body px-8 py-8" @click.outside="console.log('clicked')";> <div class="responsive-container overflow-hidden relative" style="padding-top: 56.25%" > <iframe width="360" height="315" class="responsive-iframe absolute top-0 left-0 w-full h-full" src="{{ $game['trailer'] }}" style="border:0;" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div> </div> </div> </template> </div>También me encontré con este problema al actualizar de Alpine 2 a 3. Cambiar @click.outside a @mousedown.outside me lo resolvió.
No estoy seguro de si se trata de un error en Alpine ya que @click.away (la forma antigua de llamar a @click.outside ) funcionaba en Alpine 2, pero funciona con esta solución.