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.
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:
QueryBox handles a keyUp event
Which eventually called triggerNewQuery() in OmniBox
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.$('').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.
