Instantsearch Searchbox - can't edit query after clicking out of searchbox

I’m using Instantsearch and Jekyll Algolia.

Problem: I can’t get back into the searchbox to edit my query text after clicking out of it.

You can see this in action here:

https://cdmshelp.veeva.com/lr/search/

To reproduce:

  1. Enter a search query in the search box.
  2. Click out of the search box, but not on a result (e.g. filter results or click into white space).
  3. Try to click into the search box to edit query.

Actual Result: You can’t click into the search box. You have to click X to completely clear it instead.

Expected Result: You can click into the search box and edit your query.

Please note that I’m using Jekyll, so JS & CSS are all appropriately imported. This is just the relevant excerpts.

Code
Search page HTML:

<div class="container">
  <div class="row buffer">
    <div class="col">
      <div id="search-searchbar"></div>
    </div>
  </div>
  <div class="row buffer">
    <div class="col-md-3">
      <div id="roles"></div>
      <br/>
      <div id="application"></div>
      <br/>
      <div id="clear-all"></div>
    </div>
    <div class="col-md-9">
      <div id="search-hits"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">&nbsp;</div>
    <div class="col-md-4">
      <div id="pagination-container"></div>
    </div>
  </div>
</div>

Algolia/Instantsearch JS:

const search = instantsearch({
  appId: '{{ site.algolia.application_id }}',
  apiKey: '{{ site.algolia.search_only_api_key }}',
  indexName: '{{ site.algolia.index_name }}',
  searchParameters: {
    restrictSearchableAttributes: [
      'title',
      'content'
    ]
  }
});

const hitTemplate = function(hit) {
  let date = '';
  if (hit.date) {
    date = moment.unix(hit.date).format('MMM D, YYYY');
  }

  let url = `{{ site.baseurl }}${hit.url}#${hit.anchor}`;

  const title = hit._highlightResult.title.value;

  let breadcrumbs = '';
  if (hit._highlightResult.headings) {
    breadcrumbs = hit._highlightResult.headings.map(match => {
      return `<span class="post-breadcrumb">${match.value}</span>`
    }).join(' > ')
  }

  const content = hit._highlightResult.html.value;

  return `
    <div class="post-item">
      <span class="post-meta">${date}</span>
      <h2><a class="post-link" href="${url}">${title}</a></h2>
      {{#breadcrumbs}}<a href="${url}" class="post-breadcrumbs">${breadcrumbs}</a>{{/breadcrumbs}}
      <div class="post-snippet">${content}</div>
    </div>
  `;
}

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-searchbar',
    placeholder: 'Search'
  })
);

Hi Claire,

I checked out your site and I’ve found the issue to be a bit of CSS causing the div with id “roles” to be covering up the search box making it un-clickable except for the very top of the search bar. Check out the attached screenshot. Changing the css of this div to not overlap will resolve the issue

Thanks!
Jason

2 Likes

Hi Jason,

Thank you so, so much. You’re a hero! I’d just gotten to the point where I couldn’t look at it anymore. I’ve updated the row class to take off that extra padding, and it’s all fixed now. Thank you again!

Hi Claire,

That’s great to hear! I completely know what you mean. Glad it is all fixed!

Let us know if you have any further questions
Best regards,

Jason