Dropdown with click outside pattern

What would be the best pattern to create a dropdown menu div or menu div with an onClick handler outside to auto close it? not a hover menu, mind you, but a click menu. I know how to show it, but I recall handling the onClick outside of the element actually implied something like portals or annoying dom manipulation in react, and I'm wondering if solid (or some community-made primitive) has a better idiomatic pattern for this?

Currently my component looks like

export const FilteringDropdown = (props) => {
  const [isShown, setIsShown] = createSignal(false)
  return (
    <div class="relative">
      <button class="border-0 bg-transparent cursor-pointer m-0 p-2 whitespace-nowrap" onClick={() => setIsShown(!isShown())}>
        <span class={`px-2 h-[24px] w-[24px] ${props.icon}`}></span>
        {props.title}
        <span class="h-[24px] w-[24px] i-material-symbols-keyboard-arrow-down"></span>
      </button>
      {isShown() && <div class="absolute top-10 left-0 w-lg bg-white border-1">FILTERS!</div>}
    </div>
  )
}

export const FilteringDropdown = (props) => {
  const [isShown, setIsShown] = createSignal(false)
  return (
    <div class="relative">
      <button class="border-0 bg-transparent cursor-pointer m-0 p-2 whitespace-nowrap" onClick={() => setIsShown(!isShown())}>
        <span class={`px-2 h-[24px] w-[24px] ${props.icon}`}></span>
        {props.title}
        <span class="h-[24px] w-[24px] i-material-symbols-keyboard-arrow-down"></span>
      </button>
      {isShown() && <div class="absolute top-10 left-0 w-lg bg-white border-1">FILTERS!</div>}
    </div>
  )
}

obviously, it only opens or close on clicking the button.

SolidJS•4y ago•

14 replies

Alterion

Dropdown with click outside pattern

export const FilteringDropdown = (props) => {
  const [isShown, setIsShown] = createSignal(false)
  return (
    <div class="relative">
      <button class="border-0 bg-transparent cursor-pointer m-0 p-2 whitespace-nowrap" onClick={() => setIsShown(!isShown())}>
        <span class={`px-2 h-[24px] w-[24px] ${props.icon}`}></span>
        {props.title}
        <span class="h-[24px] w-[24px] i-material-symbols-keyboard-arrow-down"></span>
      </button>
      {isShown() && <div class="absolute top-10 left-0 w-lg bg-white border-1">FILTERS!</div>}
    </div>
  )
}

export const FilteringDropdown = (props) => {
  const [isShown, setIsShown] = createSignal(false)
  return (
    <div class="relative">
      <button class="border-0 bg-transparent cursor-pointer m-0 p-2 whitespace-nowrap" onClick={() => setIsShown(!isShown())}>
        <span class={`px-2 h-[24px] w-[24px] ${props.icon}`}></span>
        {props.title}
        <span class="h-[24px] w-[24px] i-material-symbols-keyboard-arrow-down"></span>
      </button>
      {isShown() && <div class="absolute top-10 left-0 w-lg bg-white border-1">FILTERS!</div>}
    </div>
  )
}

obviously, it only opens or close on clicking the button.

Dropdown with click outside pattern

Similar Threads

Dropdown with click outside pattern

Similar Threads

Similar Threads

Similar Threads