onblur on input field makes popup unclickable-CodePudding

    function showSuggestions(){
        let searchableModulesDiv = document.getElementById('searchableModules');
        searchableModulesDiv.classList.remove('d-none');
    }

    function hideSuggestions(){
        let searchableModulesDiv = document.getElementById('searchableModules');
        searchableModulesDiv.classList.add('d-none');
    }
    
    function filterSuggestions() {
        
    }

.prj-searchable-modules{
    position:fixed;
    margin-top: 70px;
    z-index: 2;
    width:100%;
}

.d-none {
    display: none;
}

<form id="searchBar" >
    <!-- ... icons, labels, etc -->
    <input type="text"  id="searchInput" placeholder="Module search..."
           onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>

<div id="searchableModules" >
  <ul >
    <li >
      <a  href="calendar.html">
        <i ></i><span >Calendar</span></a>
    </li>
    <!-- ... more li items -->
  </ul>
</div>

I have a quick search bar in my website which when clicked shows a list clicable links.

The problem I'm facing is that clicking a link does nothing, and that's because I think the search bar loses focus as soon as I click the link, and so the actual "click" happens after the link already disappeared.

Any suggestion is appreciated, even if it's a different approach (possibly without using external plugins).

I'm using Bootstrap 5 and plain JS at the moment.

CodePudding user response：

You can use setTimeout to postpone the hiding after the click event. Also, if you do not want to hide the list if an item is clicked, then you could simply add a conditional for the blur.

function showSuggestions(){
        let searchableModulesDiv = document.getElementById('searchableModules');
        searchableModulesDiv.classList.remove('d-none');
    }

    function hideSuggestions(){
        setTimeout(() => {
            let searchableModulesDiv = document.getElementById('searchableModules');
            searchableModulesDiv.classList.add('d-none');
        }, 100);
    }
    
    function filterSuggestions() {
        
    }

.prj-searchable-modules{
    position:fixed;
    margin-top: 70px;
    z-index: 2;
    width:100%;
}

div.d-none > #searchableModules {
    display: none;
}

<form id="searchBar" >
    <!-- ... icons, labels, etc -->
    <input type="text"  id="searchInput" placeholder="Module search..."
           onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>

<div id="searchableModules"  onclick="console.log('clicked'); hideSuggestions();">
  <ul >
    <li >
      <a  href="#">
        <i ></i><span >Calendar</span></a>
    </li>
    <!-- ... more li items -->
  </ul>
</div>

CodePudding user response：

If you place the search bar and search modules in the same parent-element, you can just use CSS.

.search-ctr:focus-within #searchableModules {
    display:block;
}

#searchableModules {
    display: none;
}

<div class='search-ctr'>
    <form id="searchBar" >
    <!-- ... icons, labels, etc -->
    <input type="text"  id="searchInput"        placeholder="Module search..."
           onfocus="showSuggestions();" onblur="hideSuggestions();" onkeyup="filterSuggestions();">
</form>

<div id="searchableModules" >
  <ul >
    <li >
      <a  href="calendar.html">
        <i ></i><span >Calendar</span></a>
    </li>
    <!-- ... more li items -->
  </ul>
</div>