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:

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.

Search page HTML:

<div class="container">
  <div class="row buffer">
    <div class="col">
      <div id="search-searchbar"></div>
  <div class="row buffer">
    <div class="col-md-3">
      <div id="roles"></div>
      <div id="application"></div>
      <div id="clear-all"></div>
    <div class="col-md-9">
      <div id="search-hits"></div>
  <div class="row">
    <div class="col-md-8">&nbsp;</div>
    <div class="col-md-4">
      <div id="pagination-container"></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: [

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

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

  const title = hit._highlightResult.title.value;

  let breadcrumbs = '';
  if (hit._highlightResult.headings) {
    breadcrumbs = => {
      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>

    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



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,