Instantsearch.js: When implementing code for initial empty query, search breaks on single char queries

[Giovanni-Mattucci]

Do you want to request a feature or report a bug?
Bug.
I'm not certain if this is related to my implementation or if I have uncovered a bug in instant search.

Bug: What is the current behavior?
I've implemented the "initial empty query" behaviour that was discussed in this ticket #4 where the user can have no results when the page is first loaded. I'm using the following code to do that:

var search = instantsearch({
    searchFunction: function(helper) {
        if (helper.state.query === "") {
            return;
        }
        helper.search();
    }
});

search.addWidget(
    instantsearch.widgets.searchbox({
        queryHook: function(query, search) {
            if (query === "") {
                search();
            } else {
                search(query);
            }
        }
    })
);

View my example here:
https://codepen.io/Giovanni-Mattucci/pen/zwRrGo

Do the following steps:

1. Search for "nursing"
2. Remove your search term
3. Type a single letter
   Notice that the search doesn't happen.

Bug: What is the expected behavior?
That after clearing search, searching by a single letter works.

Bug: What browsers are impacted? Which versions?
All browsers.

What is the version you are using? Always use the latest one before opening a bug issue.
Instantsearch.js 1.11.13

[bobylito]

Thanks for reporting the issue :) Will check asap

[bobylito]

So it seems that the issue from your code, you use a combination of some advanced features that are a bit hard to grasp, namely the queryHook and the searchFunction. They are both "hook" that will modify the behavior of the search.

What I found is that you're query hook changes the search in a way that is not expected in your search function:

queryHook: function(query, search) {
    if (query === "") {
    search(); // Here you set the query to undefined
    } else {
    search(query);
    }
    clearSearch(search);
}

But in your code for the searchFunction, you check for the empty string value for the query. But actually this value is undefined.

I ended up doing:

queryHook: function(query, search) {
    search(query);
    clearSearch(search);
}

If you only want to disable for the first search, maybe you could just implement a one time flag instead of checking for the value of the query since it might go back to this empty value after the user has started searching.

[Giovanni-Mattucci]

Thanks @bobylito glad it's not a bug that is inherent.

With the queryhook I was trying to implement the second part of #4 where the search hit list still has the results of the the last character that was deleted.

Implementing the one time flag works, although a desired behaviour would be to have the results return to blank (as like the initial state) if everything is deleted from the search box.

[bobylito]

Oh ok then that something that you can do. When you catch that the query is empty then you can hide the part that display the results and the filters and when it's not empty you display them back.

To go even further, you can use the event render on instantsearch.js to change what is displayed in a smoother way. You can find of fork of your example on codepen. I mainly changed the searchFunction:

searchFunction: function(helper) {
    if (helper.state.query === "") {
        hideHits();
        return;
    }
    this.once('render', function() {
        showHits();
    });
    helper.search();
    if (!clearExecuted) {
        // run once on init
        clearExecuted = true;
        clearSearch(helper);
    }
}

[Giovanni-Mattucci]

Ahh, so there is an additional step of hiding the hits area! Ok good to know.
Thanks for the help, I think I got it figured out :)