Close the pop-up when clicking outside it

Question

<div className="topnav">
                    <div className="search-container">
                      <ul style={{ marginLeft: "2px" }}>
                        <form className="main-form" autocomplete="off">
                          <label for="main-search"></label>
                          <input
                            type="text"
                            name="searchData"
                            className="input-text input-text--border-radius input-text--style-1"
                            onKeyPress={this.keyPress}
                            autocomplete="off"
                          />
                          {this.state.showSearchLoader === false ? (
                            <button className="btn--icon fas fa-search main-search-button"></button>
                          ) : (
                            <div class="spinner-border main-search-button-loader-dash btn--icon"></div>
                          )}
                          {this.state.searchData.length != 0 && (
                            <Suggetion
                              searchedData={this.state.searchData}                             
                            />
                          )}
                        </form>
                      </ul>
                    </div>
                  </div>

This is the html code,i have written for a search functionality. The issue is i want to close the suggestion component when i click outside anywhere on the screen.

        <ul className="options">
          {Array.isArray(props.searchedData) &&
            props.searchedData.map((item, index) => {
              return (
                <a key={index} href={`/product/${_get(item, "sku")}`}>
                  <div
                    className="row"
                    style={{
                      border: "1px solid #eaeaea",
                      marginRight: "0px",
                      marginLeft: "0px",
                      padding: "6px",
                    }}
                  >
                    <div className="col-md-3">
                      <img
                        className="img-responsive"
                        src={item.images[0]}
                        style={{ width: 60, height: 60 }}
                      />
                    </div>
                    <div className="col-md-7" style={{ paddingTop: "10px" }}>
                      <a
                        href={`/product/${_get(item, "sku")}`}
                        title={item.name}
                        style={{ fontSize: "14px" }}
                      >
                        {item.name}
                      </a>
                    </div>
                    <div className="col-md-2" style={{ paddingTop: "10px" }}>
                      <a
                        href={`/product/${_get(item, "sku")}`}
                        title={item.name}
                        style={{ fontSize: "14px" }}
                      >
                        &#8377;{item.price}
                      </a>
                    </div>
                  </div>
                </a>
              );
            })}
        </ul>
      </div>
    );
  }

Above one is the suggestion component.The flow is when i type anything in the search result it will show me suggestion component.But it should be closed when i click anywhere on the screen except that component. Can anyone please help me..

Below one is the css i have use:

.topnav {
  overflow: hidden;
  background-color: none;
  margin-left: -210px;
}

.topnav .search-container {
  float: right;
}

.topnav input[type="text"] {
  padding: 9px 40px;
  margin-top: 8px;
  margin-left: -12px;
  font-size: 16px;
  border: 1px solid;
  border-radius: 20px;
}

.topnav .search-container button {
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.main-form {
  position: relative;
  width: 90%;
  padding: 12px;
}

.main-search-button {
  position: absolute;
  top: 55%;
  left: 230px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  color: black;
}
.search_bar {
  border-radius: 0 0 2px 2px;
  transition: all 0.3s ease;
  position: fixed;
  left: 150px;
  background-color: #fff;
  color: #000;
  top: 50px;
  z-index: 9;
  box-shadow: 2px 3px 5px -1px rgb(0 0 0 / 50%);
  overflow: hidden;
  display: block;
  max-height: 350px;
  width: 460px;
  overflow-y: auto;
  scrollbar-color: red;
} 

Answer 1

It is not that simple to create a good implementation for that and there are already some self-explanatory solutions around, so it is not worth it to re-copy them here.

You can see Airbnb's approach here .

We have our own implementation which is based on the last one, but with some improvements (you can see it here ). To use it, follow this instructions:

1. npm install @codistica/react or yarn add @codistica/react (library is highly tree-shakeable).

2. Use withOnClickOutside HOC as follows:

import React from 'react';
import {withOnClickOutside} from '@codistica/react';

const PopUp = withOnClickOutside('div');

function MyComponent() {
  return (
    <PopUp onClickOutside={() => {alert('Close the Pop-Up!');}} />
  );
}

export {MyComponent};

3. Done.