Gravatar for dan@getfishtank.ca

Question by Dan Cruickshank, May 12, 2014 10:21 AM

When keyboard is visible on iOS 6 + 7, clicking ".CoveoSearchButton" does not execute search

This is using the JS Search. I'm wondering if this can be confirmed as an issue or if it's something in our code.

Steps:

  • Load site on iOS device (6 or 7)
  • Tap into .CoveoQueryBox element
  • (this brings up iOS keyboard)
  • Type values in search input and tap ".CoveoSearchButton"
  • Nothing happens
  • Close iOS keyboard
  • tap ".CoveoSearchButton" works

Pressing "return" key on the virtual keyboard will submit the search. I'm not a big fan of the iOS/Safari debugging stack but I can't find any "click" or "touchstart" events propagating when CoveoSearchButton is tapped either. That might be a red herring.

Thank you for any insights.

1 Reply
Gravatar for dan@getfishtank.ca

Answer by Dan Cruickshank, May 12, 2014 3:08 PM

Sorry for the lengthy post, but this appear to be what's going on:

TLDR; A CoveoSearchButton touch with keyboard-open is not forcing the input to 'blur' so state.q is never being set. Something is happening, just not what I expected.

I was working from an earlier version of "global search box" referenced at https://developers.coveo.com/display/JsSearch/Standalone+Search+Box

I'm on the April build and I see an "initSearchBox" event referenced there that I don't have in my files. Here was the base of the code:

 var searchInterface = $("#searchbox");
        searchInterface.on("afterInitialization", function () {
            searchInterface.on("newQuery", function (e, args) {              
                var currentKeyword = searchInterface.coveo("state", "q");
                if (currentKeyword != "") {
                    window.location.href = searchPage + "#q=" + encodeURIComponent(currentKeyword);
                }
            }); 
        });

After some digging, this is what I found:

1) A click/touch on "CoveoSearchButton" fired a query to Coveo 2) A click/touch on "CoveoSearchButton" did not set "q" in the 'state' collection

So this scenario would never be true, currentKeyword would always be false.

if (currentKeyword != "") {
    window.location.href = searchPage + "#q=" + encodeURIComponent(currentKeyword);
}

When I did a stack trace I found that pressing return would work because:

  1. QueryBox handles a keyUp event

  2. Which eventually called triggerNewQuery() in OmniBox

  3. Which sets the "q" in the state with this line:

    this.queryStateModel.set(Coveo.Models.QueryStateModel.attributesEnum.q, Coveo.$(this.element).val());

I found the "q" was set on a the input tags blur event, I'm not sure if that's universal or not.

SearchBox.prototype.buildInputTag = function () {
                var _this = this;
                return Coveo.$('<input type="text" autocapitalize="off" autocorrect="off" />').blur(function (event) {
                    _this.queryStateModel.set(Coveo.Models.QueryStateModel.attributesEnum.q, Coveo.$(event.target).val());
                });
            };

For whatever reason, as long as the keyboard was open, it wasn't successfully "blurring" the input. I tried a few different CSS & HTML combinations to encourage the input to lose focus but I couldn't.

I'll either use JS to force focus onto another elemennt or change the JS to pull the value from the input directly instead of from the coveo query state.

Ask a question