How to toggle the dropdown?

[esphoenixc]

When clicking a dropdown, it opens but I want to close it when clicked again.

I was trying to use v-show but it has an issue. My dropdown currently closes when clicked outside or when an item inside the dropdown clicked (I've used document.activeElement.blur() ).

So, to sum up, my question is how do I close the dropdown not only by clicking outside, but also clicking the dropdown again?

[saadeghi]

If you're using <details> tag it opens with click and closes with second click. You can add a JS script to close it when clicked outside or when an item is clicked. Adding or removing the open attribute from <details> tag opens or closes the dropdown.

If you're using the <label> tag, it works with CSS focus. It opens when it is focused and it closes when it loses focus so if you want it to close on the second click, you can use JS to blur it (document.activeElement.blur())

Let me know if you have any questions.

[esphoenixc]

I did use document.activeElement.blur() but it closes the dropdown immediately. So there's got to be a way to know that it's second click, meaning the dropdown is currently open. For that, I implemented the solution I saw in discussion. It works, but there's a minor issue in which when I close on the second click and then click another dropdown (there's multiple dropdowns) to open, I see the previous dropdown very briefly. How can I fix this issue of seeing the previously opened dropdown very briefly? It only happens when I close on the second click and click the other dropdown to open.

  <div class="dropdown w-full" @focusout="handleDropdownFocusLost">
              <button
                ref="dropDownButton"
                tabindex="0"
                class="w-full h-[40px] rounded-xl bg-[#1A272E]"
                @click="clickDropDown"
              >

   <ul
                :style="{ visibility: isDropDown ? 'visible' : 'hidden' }"
                tabindex="0"
                class="dropdown-content menu p-[10px] shadow bg-slate-600 rounded-box w-full mt-2 text-white max-h-[206px] overflow-y-auto flex-nowrap"
              >

    handleDropdownFocusLost(event) {
      console.log('handleDropdownFocusLost', event)
      const relatedTarget = event.relatedTarget
      const currentTarget = event.currentTarget

      if (relatedTarget instanceof HTMLElement && currentTarget.contains(relatedTarget)) {
        return
      }

      this.isDropDown = false
    },
    
      clickDropDown() {
      this.isDropDown = !this.isDropDown
    },

My version is 2.40.1 I guess I changed the label tag to button if I remember correctly.

[robodna]

How do I use this dropdown in solidjs and have it close when I click outside the menu, select a menu item, and re-click on the menu button? I am using the 'Method1' with details tag, and all is working except clicking ouside the menu. The components seem quite good, however I am struggling to obtain this basic functionality from the dropdown component. ( it could be helpful to update the docs to show an example on how to accomplish this )

Update: I have attached an 'onClick' event handler to window object as a work-around but not sure if this is efficient ( always called on every click, even if the dropdown menu is not open ) or could cause issues in some browsers like safari:

const handleCloseMenu = (e) => { if (!hamMenu.contains(e.target)) hamMenu.removeAttribute('open'); }

Many thanks