html - Alpine JS - modal won't close unless @click is duplicated

Question

I'm using Alpine JS. I have a field which when clicked displays a modal. When I click away from the modal it closes. When an <li> within the modal is clicked the modal also closes.

                    <div class="relative inline-block text-left">
                    
                
                    <div 
                        x-data="{ journeyModal: false, journeyType: 'Oneway' }"
                        @click="journeyModal = !journeyModal" 
                        class="cursor-pointer">
                        <div class="flex">
                            <input disabled x-bind:value="journeyType" id="journeyType" type="text" name="journeyType" autocomplete="off" class="hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 inline-flex justify-center w-32 px-4 py-2 text-sm font-medium text-gray-700 bg-white border-0 rounded-md cursor-pointer" />

                        </div>

                            <div x-show.transition.duration.200ms="journeyModal" @click.away="journeyModal = false" class="ring-1 ring-black ring-opacity-5 absolute left-0 z-10 w-56 mt-1 origin-top-right bg-white rounded-md shadow-lg">
                                <div @click=" journeyModal = !journeyModal" class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                                    <li @click=" journeyModal = !journeyModal, journeyType = 'Roundrtip' " class="hover:bg-gray-100 hover:text-gray-900 block px-4 py-2 text-sm text-gray-700" role="menuitem">Rountrip</li>
                                    <li @click=" journeyModal = !journeyModal, journeyType = 'Oneway' " class="hover:bg-gray-100 hover:text-gray-900 block px-4 py-2 text-sm text-gray-700" role="menuitem">Oneway</li>
                                    <li @click=" journeyModal = !journeyModal, journeyType = 'Multicity' " class="hover:bg-gray-100 hover:text-gray-900 block px-4 py-2 text-sm text-gray-700" role="menuitem">Multicity</li>  
                                </div>
                                
                            </div>
                            <p class="pl-96" x-text='journeyModal' ></p>
                    </div>
                </div>

This is working as required. However, I found that it will only work if the DIV containing the <li> tags also includes the Alpline JS - @click=" journeyModal = !journeyModal", i.e. repetition of the same directive as exists within the li tags.

I don't understand why this is needed to toggle the value of journeyModal.

question from:https://stackoverflow.com/questions/65927769/alpine-js-modal-wont-close-unless-click-is-duplicated

Answer 1

Waitting for answers