Close menu when click detected outside

Question

I'm trying to close a menu when the user clicks outside of the element. I have tried many solutions from Stack overflow but none of them work for me. The user should be able to click on the menu button (3 dots), which then shows the menu. Then if they click outside of this, it should close each time.

https://jsfiddle.net/Lzeukhcj/1/

Here is my code and what I have tried:

Javascript

  const dots = document.querySelector(".dot-wrap");
  const popup = document.querySelector(".popup");

  dots.onclick = () => {
    popup.style.display = "block";
  }

  document.onclick = (event) => {
    let isClickInside = popup.contains(event.target);

    if (!isClickInside) {
      console.log("outside box");
      popup.style.display = 'none';
    }
  }

SCSS


.tweet-container {
  max-width: 100%;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
  border-bottom: solid 1px #f1f1f1;
}

.tweet-container-right {
  width: 100%;
  margin-left: 10px;
}

.tweet-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.icon-container {
  display: flex;
  font-size: 0.8em;
}

.user-info {
  display: flex;
  align-items: center;
 

  .tweet-name {
    font-size: 15px;
    margin-right: 3px;
    color: #0f1419;
  }

  .tweet-username {
    font-size:15px;
    
    color: #526470;
  }

  .middle-dot{
    margin-left: 3px;
    margin-right: 3px;
  }

  .time {
    font-size: 15px;
    color: #526470;
  }
}

.tweet-text {
  font-size: 0.8em;
}

.verified-tick{
  margin-right: 3px;
}

.dots-popup-container {
  position: relative;

  .dots {
    width: 18px;
    fill: red;
  }

  .popup {
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    display: none;
    /*height: 0px;*/
    transition: 2s ease;
    box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
    padding-top: 14px;

    .popup-option {
      display: flex;
      margin-bottom: 20px;

      p {
        color: #526470;
      }
      .popup-icon {
        width: 20px;
        margin-left: 10px;
        margin-right: 10px;
        fill: #526470;
      }
    }
  }
}

HTML

 

  
    
      
        Title 
        
 
        ·
        2d
      

      

        
          
        






        
          

            
              
            Not interested in this tweet
          

          
            
              
            
            Unfollow whoever
          

          
            
               
            Mute whoever

          
          
            
              
            
            Block whoever
          

          
            
              
            
            Mark as spoiler

user_14251221 · Answer

When you click the dots to open the popup, your document click event listener is checking whether the target is a child of the popup. Since the toggle is not, the modal is opened, then closed.

You can fix this by using Event.stopPropagation() to prevent this click event from being captured by the document click event listener when the dots are clicked.

Your JS should be:

window.onload = () => {
  const dots = document.querySelector(".dot-wrap");
  const popup = document.querySelector(".popup");

  dots.onclick = (e) => {
    popup.style.display = "block";
    e.stopPropagation();
  }

  document.onclick = (event) => {
      let isClickInside = popup.contains(event.target);

      if (!isClickInside) {
        console.log("outside box");
        popup.style.display = 'none';
      }
    }
}

Demo:

window.onload = () => {
  const dots = document.querySelector(".dot-wrap");
  const popup = document.querySelector(".popup");

  dots.onclick = (e) => {
    popup.style.display = "block";
    e.stopPropagation();
  }

  document.onclick = (event) => {
    let isClickInside = popup.contains(event.target);

    if (!isClickInside) {
      console.log("outside box");
      popup.style.display = 'none';
    }
  }
}

/* compiled from scss */

.tweet-container {
  max-width: 100%;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
  border-bottom: solid 1px #f1f1f1;
}

.tweet-container-right {
  width: 100%;
  margin-left: 10px;
}

.tweet-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.icon-container {
  display: flex;
  font-size: 0.8em;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info .tweet-name {
  font-size: 15px;
  margin-right: 3px;
  color: #0f1419;
}

.user-info .tweet-username {
  font-size: 15px;
  color: #526470;
}

.user-info .middle-dot {
  margin-left: 3px;
  margin-right: 3px;
}

.user-info .time {
  font-size: 15px;
  color: #526470;
}

.tweet-text {
  font-size: 0.8em;
}

.verified-tick {
  margin-right: 3px;
}

.dots-popup-container {
  position: relative;
}

.dots-popup-container .dots {
  width: 18px;
  fill: red;
}

.dots-popup-container .popup {
  background-color: white;
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  display: none;
  /*height: 0px;*/
  transition: 2s ease;
  box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
  padding-top: 14px;
}

.dots-popup-container .popup .popup-option {
  display: flex;
  margin-bottom: 20px;
}

.dots-popup-container .popup .popup-option p {
  color: #526470;
}

.dots-popup-container .popup .popup-option .popup-icon {
  width: 20px;
  margin-left: 10px;
  margin-right: 10px;
  fill: #526470;
}


  
    
      
        Title 
        ·
        2d
      
      
        
          
        
        
          
            
              
            Not interested in this tweet
          
          
            
              
            
            Unfollow whoever
          

          
            
               
            Mute whoever
          
          
            
              
            
            Block whoever
          
          
            
              
            
            Mark as spoiler

Close menu when click detected outside

1 Answers