How to add a click event outside an element? – Blancer.com Tutorials and projects

My current code opens up an input via a click by adding a class. I’m having trouble adding a second click that removes the added class when the user clicks off the input. I added a second click event but it just stops my first click event from working.

Is there a different way to approach this using pure JavaScript?

(Commented out failed attempt.)

let searchElement = document.querySelector('#searchElement');
let offCanvas = document.querySelector('#main');

searchElement.addEventListener('click', () => {
  searchElement.classList.add('extendInputSearch');
});


// offCanvas.addEventListener('click', () => {
  // searchElement.classList.remove('extendInputSearch');
// });

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e1e2f1;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

input {
  width: 100%;
  height: 32px;
  border: none;
  outline: none;
  font-size: 1rem;
}

.inputSearch {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 15px;
  padding: 8px 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.inputSearch:hover {
  border: 1px solid #7e51fa;
}

.inputSearch i {
  color: #7e51fa;
  margin-right: 20px;
}

.extendInputSearch {
  max-width: 400px;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<main id="main">
    <form>
      <div id="searchElement" class="inputSearch">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="Search">
      </div>
    </form>
  </main>