CODEWITHSUNDEEP
javascriptjquerycsstailwind-cssalpine.js
Minhaj
Minhaj

Reputation: 82

Alpine js remove class while click on body or outside of select box

                   <select                     
                        name="country"
                        id="country"
                        :class="{ 'active': isOpen == 1 }"
                        @click="isOpen = !isOpen"
                        @keydown.escape="isOpen = false"
                        class="form-group__input pl-4 rounded-lg  select-triangle-arrow">
                        <option>hello</option
                </select>

I successfully added class on click on select . but its not remove while i click on body or outside of select box. Please anyone help me to do this. Thanks

Upvotes: 1

Views: 3889

Answers (1)

rehhouari
rehhouari

Reputation: 41

Note from Alpine v3.x modifier name have changed

For Alpine.js v3:

You can add another click event handler with the .outside modifier.

@click.outside="isOpen = false"

For Alpine.js v2:

use the .away modifier.

@click.away="isOpen = false"

From the Docs:

.outside is a convenience helper for listening for a click outside of the element it is attached to.

Upvotes: 4

Related Questions