How to Close a Dropdown on Click Outside

jQuery drop down menu closing by clicking outside

You can tell any click that bubbles all the way up the DOM to hide the dropdown, and any click that makes it to the parent of the dropdown to stop bubbling.

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $("#dropdown").hide();
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$("#dropdown").click(function(e){
  e.stopPropagation();
});

Demo: http://jsbin.com/umubad/2/edit

Close Dropdown Menu when clicking outside

You can use onBlur(). But in order to do that you need to add tabindex="0" to the invoking element i.e the element which is invoking dropdown to display.

const dropdown = document.querySelector('.dropdown');
const dropdownWindow = document.querySelector('.dropdown__window')

dropdown.addEventListener('click', (event) => {
  dropdownWindow.classList.toggle('dropdown__window--active');
});

dropdown.addEventListener('blur', (event) => {
  dropdownWindow.classList.remove('dropdown__window--active');
});

.dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 260px;
}

.dropdown__window {
  position: absolute;
  background: #ccc;
  box-shadow: 0 10px 40px #1d2021;
  width: 100%;
  max-width: 260px;
  top: 45px;
  z-index: 12;
  overflow: hidden;
  display: none;
  visibility: hidden;
}

.dropdown__window--active {
  display: block;
  visibility: visible;
}

.dropdown__window>* {
  font-size: 14px;
  cursor: pointer;
  display: block;
  padding: 1rem 0 1rem 1rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.42857143;
  color: #fff;
  white-space: nowrap;
}

<div class="dropdown dropdown__open" tabindex="0">
  Open Dropdown

  <div class="dropdown__window">
    <a class="dropdown__link">Link Text</a>
    <a class="dropdown__link">Link Text</a>
    <a class="dropdown__link">Link Text</a>
    <a class="dropdown__link">Link Text</a>
  </div>
</div>

Closing dropdown by clicking outside in Javascript (tutorial clarification)

The issue lies in shareVis function. Here

document.getElementById("mySharedown").className = "show";

you are replacing #mySharedown class name to show. Then in window.onclick

var sharedowns = document.getElementsByClassName("sharedown-content");

you are not getting any sharedowns as you already replaced the class name to show.

---

You can either add show class into classList

document.getElementById("mySharedown").classList.add("show");

or replace the class name with sharedown-content show

document.getElementById("mySharedown").className = "sharedown-content show";

Working solution below:

function shareVis() {    //document.getElementById("mySharedown").className = "sharedown-content show";    document.getElementById("mySharedown").classList.add("show");}
window.onclick = function(event) {    if (!event.target.matches('.sharebtn')) {
        var sharedowns = document.getElementsByClassName("sharedown-content");        var i;        for (i = 0; i < sharedowns.length; i++) {            var openSharedown = sharedowns[i];            if (openSharedown.classList.contains('show')) {                openSharedown.classList.remove('show');            }        }    }}
document.getElementById("mySharedown").addEventListener('click',function(event){    event.stopPropagation();});

#mySharedown{  display: none;  border: 1px solid black;}
#mySharedown.show {  display: block;}

<div class="sharedown">         <p onclick="shareVis()" class="sharebtn">  Share</p>    <div id="mySharedown" class="sharedown-content">        <a href="#">Self</a>        <p>User</p><input type="text" name="user-name" placeholder="Share to">        <a href="#">Community</a>    </div> </div>

How can I close a dropdown on click outside?

You can use (document:click) event:

@Component({
  host: {
    '(document:click)': 'onClick($event)',
  },
})
class SomeComponent() {
  constructor(private _eref: ElementRef) { }

  onClick(event) {
   if (!this._eref.nativeElement.contains(event.target)) // or some similar check
     doSomething();
  }
}

Another approach is to create custom event as a directive. Check out these posts by Ben Nadel:

• tracking-click-events-outside-the-current-component
• selectors-and-outputs-can-have-the-same-name
• DirectiveMetadata
• Host Binding

React closing a dropdown when click outside

You need to handle the ref passed so that it actually attaches to something:

const Home = forwardRef(({ open, setOpen }, ref) => {
  console.log(open);

  return (
    <section ref={ref}>
      <h1>Feels good to be home!</h1>

      <button className="secondary" onClick={() => setOpen(!open)}>
        Dropdown Toggle
      </button>

      {open && (
        <ul>
          <li>One</li>
          <li>Two</li>
        </ul>
      )}
    </section>
  );
});

---

Related Topics