in modal @click.away is not working i also tried @click.outside both are not working

[shahbazsyed128]

`

<div x-ref="modal1_button" @click="open = true" class='question-block bg-white p-4 mb-2 '>

Shahbaz Syed

What is your question or link?

<div role="dialog"
aria-labelledby="modal1_label"
aria-modal="true"
tabindex="0"
x-show="open"
@click="open = false; $refs.modal1_button.focus()"
@click.away="open = false"
class="qu-modal fixed top-0 left-0 w-full h-screen flex justify-center items-center ">

<div data-modal-document
@click.stop=""
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform scale-50 opacity-0"
x-transition:enter-end="transform scale-100 opacity-100"
x-transition:leave="transition ease-out duration-300"
x-transition:leave-start="transform scale-100 opacity-100"
x-transition:leave-end="transform scale-50 opacity-0"
class="overflow-y-auto flex flex-col rounded-lg shadow-lg overflow-hidden bg-white w-3/5 h-3/5 z-10">

<i @click="open = false" class="fa fa-times-thin fa-2x text-gray-500 rounded-full py-1 px-3 hover:bg-gray-200" aria-hidden="true">

Tips on getting good answers quickly

• Make sure your question has not been asked already


• Keep your question short and to the point


• Double-check grammar and spelling

Shahbaz Syed asked

<button @click="open = ! open">Toggle

                            <div x-show="open" @click.outside="open = false">Contents...</div>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>`