I have a modal that's is loaded with alpines when a button is click, the thing is it also triggers a click.outside event. Is there a way of stopping this happening? I have tried finding a solution online but can't find a thing, could someone help a newbie out?

                <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"
                                        >
                                            &times;
                                        </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>

I have a modal that's is loaded with alpines when a button is click, the thing is it also triggers a click.outside event. Is there a way of stopping this happening? I have tried finding a solution online but can't find a thing, could someone help a newbie out?

                <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"
                                        >
                                            &times;
                                        </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>

• javascript
• events
• alpine.js

1 Answer 1

I ran into this problem as well when updating from Alpine 2 to 3. Switching @click.outside to @mousedown.outside solved it for me.

I'm not sure if this is a bug in Alpine since @click.away (the old way to call @click.outside) worked in Alpine 2 but it does work with this solution.