Javascript attribute - onClick and onClickOverThere for dropDown

Question

I have reactJs app and I have made a custom dropDown with a div that I set an onClick attribute to open dropDown and close it. but also I want to close it when the user clicks to another part of the site.

 <div
    onClick={() => setNoneQuote(noneQuote ? false : true)}
    className="selected-drop-down"
 >
    <span className="dropDownText">{selectedQuoteCurrency}</span>
    <img
      className="dropDownIcon"
      src={require("../assets/image/arrow/dropDown-Arrow.png")}
      width="15px"
      alt="arrow"
    />
 </div>

I try onMouseDown instead of onClick according to this answer ==> stackoverflow ,but I don't know why it doesn't work for me :(

Answer 1

const dropdownElement= document.querySelector("choose an id or a specific class")
window.onclick = function(event) {
  if (event.target !== dropdownElement) {
    dropdownElement.style.display = "none"; // or any other function that you want to call
  }
}

this may not be the exact code to fix your problem but you can use the logic

Answer 2

You could do it in different ways, but I will show you solution that I used in one of my projects.

So, I used <header> and <main> tags where I had all my Components. And in those tags i used eventListener with a callback function, like this:

<header onClick={handleClick}>
      <Nav />
      <Greeting />
      <Sidebar />
</header>

and

<main onClick={handleClick}>
          <Description />
          <Icons />
          <Prices />
          <Gallery />
          <NecessaryInfo />
          <Location />
          <GalleryModal />
          <ConditionsModal />
        </main>

In a callback function handleClick I checked where user could click and to do that I used next logic of pure JS:

!e.target.classList.contains("menu-open") &&
  !e.target.classList.contains("menu-links") &&
   !e.target.parentElement.classList.contains("menu-links") &&
  !e.target.parentElement.parentElement.classList.contains("menu-links") &&
  closeSidebar();

Function closeSidebar() is simple:

const closeSidebar = () => {
setIsSidebarOpen(false)};

In your code instead of using setNoneQuote(noneQuote ? false : true) you could also use: setNoneQuote(!noneQuote). Exclamation mark before value always will change it to the oposite.