3

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>

1
  • Add an event to the body and then check whether the target of the click is inside searchElement? Dec 23, 2021 at 10:59

2 Answers 2

6

The problem with your attempt is that the event listener to remove the class is applied to the entire #main element, which includes searchElement. That means both event listeners are applied to the searchElement, and when you click on the searchElement, the class is first added (with the first listener) and then removed (with the second listener).

To make it work, you need to change the second listener to specifically exclude the searchElement. For example, in this code, we add a click listener to the whole document. In the listener, we check if the click is outside the searchElement by using the Node.contains() function on the event parameter. If the clicked element is not a child of searchElement (that is, the click is outside searchElement), we remove the extendInputSearch class from searchElement.

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

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


document.addEventListener('click', (e) => {
  if(!searchElement.contains(e.target)){
    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>

1

try it:

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

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


  document.addEventListener('click', (e) => {
  const searchElement = document.querySelector('#searchElement');
 
  if (e.target != searchElement && e.target != searchElement.querySelector('i') && e.target != searchElement.querySelector('input')) {
    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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.