Gravatar for dan@getfishtank.ca

Question by Dan Cruickshank, May 8, 2014 6:36 PM

On mobile touch events close OmniBox without selecting the content

I'm using the TopFieldSuggestion on a JS Search Interface. On iOS 6 devices (ignoring iOS 7 for now) when the OmniBox is result is touched it closes immediately. I can see that when the omnibox is "FastClick"'d it looks like it's being told to close:

Coveo.$(this.root).fastClick(function (e) {
  if (_this.omniBoxIsOpen) {
    _this.escapeEvent();
  }
});

I was snooping around, but it doesn't look like the method below has been bound to FastClick.

OmniBox.prototype.handleClick = function (event) {
            var target = this.getCorrectTarget(event);
            if (target) {
                this.toggleSelected(target);
                this.selectionEvent();
            }
        };

I was trying to access the OmniBox after initialization but I can't get the right object returned with this code.

Coveo.$("#search").coveo(Coveo.Ui.OmniBox, 'get')

If I wanted to modify the prototype directly I think this line of code inside of Coveo.Ui.Omnibox would do the trick

this.bind.fastClick(this.omniBoxDiv, this.handleClick);

Any insights on the best way to approach this problem? Should I modify the prototype? Bottom line, the omnibox disappears when touched on mobile devices. Thanks!

2 Replies
Gravatar for mlaporte@coveo.com

Answer by Martin Laporte, May 9, 2014 5:42 AM

I reproduced this issue, it was indeed a bug. Not exactly where you though --- but close enough :) Kudos for the investigation!

The handleClick method in Omnibox was in fact unused and I've remove it. Omnibox entries are never created by the Omnibox component itself; instead they are created by other components listening for the proper omnibox events. So the facet content you see there is created by the facet, the completions by the auto-complete components, etc. Custom external code can pretty easily add stuff to display there too, by the way.

Anyhow, the problem was in the suggestion component. It was listening for a "click" event which never happened when touch events were concerned. I've changed that to a fastClick and it now works.

If you want to test, I've uploaded a dev JS UI build here (it's a snapshot from my machine so do not use that thing for anything serious). We'll soon arrange for public dev builds to be available for testing fixes, but in the meanwhile that'll do.

Gravatar for dan@getfishtank.ca

Answer by Dan Cruickshank, May 9, 2014 11:22 AM

Sorry Martin, this wouldn't fit as a reply under your comment.

Many thanks for providing that file. Is this the function I should be adding in?

           SuggestionForOmniBox.prototype.buildRowElements = function (results, args) {
            var _this = this;
            var ret = [];
            _.each(results, function (result) {
                var row = Coveo.$(_this.structure.row({
                    rawValue: result.value,
                    data: Ui.JQueryUtils.highlightElement(result.value, args.completeQueryExpression.word)
                }));
                row.fastClick(function () {
                    _this.onSelect.call(_this, result.value, args);
                });
                row.on("keyboardSelect", function () {
                    _this.onSelect.call(_this, result.value, args);
                });
                ret.push(row);
            });
            return ret;
        };

If so, I'll add this function to Coveo.Ui.SuggestionForOmniBox.prototype in my patch file. Thanks!

Gravatar for dan@getfishtank.ca

Comment by Dan Cruickshank, May 9, 2014 5:57 PM

I would like to add that because I was adding outside of CoveoJsSearch.js itself I had to change this line

Ui.JQueryUtils.highlightElement(result.value, args.completeQueryExpression.word)

to

Coveo.Ui.JQueryUtils.highlightElement(result.value, args.completeQueryExpression.word)

Thank you for your expertise Martin.

Gravatar for mlaporte@coveo.com

Comment by Martin Laporte, May 12, 2014 8:32 AM

Sorry I'm late --- yeah that's the function where the fix is.

Ask a question