'Stop clicking on wrapper eventListner

I'm trying to make an open/colapse elements on this page. I'm using #wrapper::before to overlay screen, also it has a eventlistner to close elements showed. Using {capture: true} on wrapper eventListner I made it open and colapse, but when I click on search bar to type something, it colapse anyway.

How do I make it not colapse with any click? Just on the wrapper::before

const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');

function openItem(e){
    e.classList.add('show');
    wrapper.classList.add('show');
}

function closeItems(){
    switch(true){
        case mainNav.classList.contains('show'):
            mainNav.classList.remove('show');
            break;
        case searchBar.classList.contains('show'):
            searchBar.classList.remove('show');
            break;
    }
    wrapper.classList.remove('show');
}

function showSelector(e){
    const eClass = e.target.classList;

    switch(true){
        case eClass.contains('nav'):
            openItem(mainNav);
            break;
        case eClass.contains('searchbar'):
            openItem(searchBar);
            break;
    }

    // if(e.target.classList.contains('nav')){
    //     openItem(mainNav);
    // } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));

:root {
  --font-family: "Ubuntu", sans-serif;
  --font-size: 16px;
  --title-color: rgb(58, 58, 58);
  --background-color: white;
  --bgHeader: #003459;
  --bgSearchBar: #002a45;
  --headers: #003459;
  --bgMain: #EBF9FF;
  --textColor: #00171F;
  --cardGreen: rgba(157, 255, 0, 1);
  --cardBlue: rgba(0, 174, 255, 1);
  --cardRed: rgba(255, 42, 42, 1);
  --cardYellow: rgba(255, 251, 0, 1);
  --headerMargin: .5rem 0;
  --box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
  --wrap-first-column: 14rem;
  --nav-txt-color: #5c5c5c;
}
#wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  background-color: var(--bgMain);
  min-height: 100%;
}
#wrapper.show::before {
  content: "";
  position: fixed;
  background-color: black;
  opacity: 0.5;
  z-index: 2;
  width: 100%;
  height: 100%;
}
header {
  grid-column: span 2;
  column-span: all;
  background: var(--bgHeader);
  justify-content: space-between;
}

.brand {
  height: fit-content;
  width: 12.5rem;
  align-items: center;
  margin: var(--headerMargin);
}

header > div + div {
  height: fit-content;
  width: auto;
  align-items: center;
  margin: var(--headerMargin);
  margin: auto 0.5rem;
}

.mininav {
  color: white;
  width: max-content;
  display: inline-block;
  flex-direction: row;
  flex-wrap: nowrap;
}
aside.show {
  left: 0;
}
aside {
    inset: 0 auto;
    position: absolute;
    top: 0;
    left: calc(var(--wrap-first-column) * -1);
  }
  main {
  width: inherit;
}
form#search.show {
  top: 0.5rem;
}
form#search {
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    transition: top 0.15s ease-out;
  }
  form#search > div {
  position: relative;
  margin-left: 10px;
}

<div id="wrapper">
        <!-- Full container grid -->

        <header class="flex">
            <div class="brand flex">
                <img src="./images/logo-cp-admin.png" alt="" class="">
            </div>
            
            <div class="flex">
                
                <!-- search bar -->
                <form id="search" action="#" method="get">
                    <div class=" align-top">
                        <input id="searchbar" type="search" placeholder=" "
                            class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5  pl-3 pr-6 my-0.5 rounded-xl">
                        <label for="searchbar">Busca...</label>
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>

            </div>
            <!-- mobile responsive -->
            <div class="mininav flex" >
                <label class="searchbar mdi mdi-magnify">MAGNIFY</label>
                <label class="nav mdi mdi-menu">HAM-MENU
            </div>
        </header>

        <div class="flex col-span2">
            <!-- side content (menu & widgets)-->
            <aside>
              side
            </aside>
            <main>
            main
            </main>
            </div>

javascript

Solution 1:^[1]

Two things needed to be changed.

First, the closeItems() function needs to be changed to accept an event, and to ignore clicks on the search bar.

Second, the #wrapper.show::before rule needs to not have z-index: 2 which was making the search bar appear below the ::before element and impossible to click on.

const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');

function openItem(e){
    e.classList.add('show');
    wrapper.classList.add('show');
}

function closeItems(e){
    if(e.target.id == 'searchbar')
        return;
    switch(true){
        case mainNav.classList.contains('show'):
            mainNav.classList.remove('show');
            break;
        case searchBar.classList.contains('show'):
            searchBar.classList.remove('show');
            break;
    }
    wrapper.classList.remove('show');
}

function showSelector(e){
    const eClass = e.target.classList;

    switch(true){
        case eClass.contains('nav'):
            openItem(mainNav);
            break;
        case eClass.contains('searchbar'):
            openItem(searchBar);
            break;
    }

    // if(e.target.classList.contains('nav')){
    //     openItem(mainNav);
    // } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));

:root {
  --font-family: "Ubuntu", sans-serif;
  --font-size: 16px;
  --title-color: rgb(58, 58, 58);
  --background-color: white;
  --bgHeader: #003459;
  --bgSearchBar: #002a45;
  --headers: #003459;
  --bgMain: #EBF9FF;
  --textColor: #00171F;
  --cardGreen: rgba(157, 255, 0, 1);
  --cardBlue: rgba(0, 174, 255, 1);
  --cardRed: rgba(255, 42, 42, 1);
  --cardYellow: rgba(255, 251, 0, 1);
  --headerMargin: .5rem 0;
  --box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
  --wrap-first-column: 14rem;
  --nav-txt-color: #5c5c5c;
}
#wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  background-color: var(--bgMain);
  min-height: 100%;
}
#wrapper.show::before {
  content: "";
  position: fixed;
  background-color: black;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
header {
  grid-column: span 2;
  column-span: all;
  background: var(--bgHeader);
  justify-content: space-between;
}

.brand {
  height: fit-content;
  width: 12.5rem;
  align-items: center;
  margin: var(--headerMargin);
}

header > div + div {
  height: fit-content;
  width: auto;
  align-items: center;
  margin: var(--headerMargin);
  margin: auto 0.5rem;
}

.mininav {
  color: white;
  width: max-content;
  display: inline-block;
  flex-direction: row;
  flex-wrap: nowrap;
}
aside.show {
  left: 0;
}
aside {
    inset: 0 auto;
    position: absolute;
    top: 0;
    left: calc(var(--wrap-first-column) * -1);
  }
  main {
  width: inherit;
}
form#search.show {
  top: 0.5rem;
}
form#search {
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    transition: top 0.15s ease-out;
  }
  form#search > div {
  position: relative;
  margin-left: 10px;
}

<div id="wrapper">
        <!-- Full container grid -->

        <header class="flex">
            <div class="brand flex">
                <img src="./images/logo-cp-admin.png" alt="" class="">
            </div>
            
            <div class="flex">
                
                <!-- search bar -->
                <form id="search" action="#" method="get">
                    <div class=" align-top">
                        <input id="searchbar" type="search" placeholder=" "
                            class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5  pl-3 pr-6 my-0.5 rounded-xl">
                        <label for="searchbar">Busca...</label>
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>

            </div>
            <!-- mobile responsive -->
            <div class="mininav flex" >
                <label class="searchbar mdi mdi-magnify">MAGNIFY</label>
                <label class="nav mdi mdi-menu">HAM-MENU
            </div>
        </header>

        <div class="flex col-span2">
            <!-- side content (menu & widgets)-->
            <aside>
              side
            </aside>
            <main>
            main
            </main>
            </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	VeryGoodDog

'Stop clicking on wrapper eventListner

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]