Chosen: iPad: Cannot close/remove li.search-choice (`click.chosen` event never fires)

Created on 4 Dec 2018 · 5Comments · Source: harvesthq/chosen

Steps to reproduce

Access https://harvesthq.github.io/chosen/ via iPad. Also reproducible through the "Toggle device toolbar" in the Chrome Console and then selecting the "iPad" device.
Under "Multiple select", add an element.
Now - without clicking elsewhere - click the "x" to remove the added element. Nothing happens.

Expected behavior

li.search-choice element should be removed. select.chosen-select option should be deselected.

Actual behavior

li.search-choice element stays. select.chosen-select option continues to be selected. Event chosen.click never fires.

Environment

Chosen Version: 1.8.7 (on Chosen website) and ~1
jQuery or Prototype Version: 3.2.1 (on Chosen website) and 2.1.4 and 2.2.4
Browser and Version: Chrome, version 70.0.3538.110 (Official Build) (64-bit)
OS and Version: Windows 10, version 1709, OS Build 16299.492

Additional information

A work-around that does work in browsers (through "Toggle device toolbar" in Console), but is not the slightest intuitive, is:

Select an element from the unfolding menu so that the li.search-choice element is added. Notice: Clicking "x" still does nothing.
Click elsewhere on the website; i.e. outside the chosen field.
Click the chosen field so that the search menu unfolds.
Now the "x" is clickable on the previously added element and clicking it correctly removes the element.

This does not seem to work on an actual, physical iPad.

Thoughts

It seems the click even doesn't get initialized in due time when an element is added.

Quickly scanning the Chosen Javascript code I see that the following core events - with regards to clicking - are being handled:

mousedown
mousemove
mouseup
touchstart
touchmove
touchend

What I don't see is event handling for:

pointerdown
pointermove
pointerup

Perhaps this has influence on the matter?

Bug iOS

Source

kafoso

👍1

All 5 comments

Can confirm that (at least in Chrome pretending to be an iPad) you cannot deselect items from a multi-select. Tapping the X does nothing.

tjschuck on 4 Dec 2018

I came across the same issue.

I found that if you will focus out from select field (not just closing field, but actually focus on any other element), X buttons still do not work. But in you will focus on this field again (and display drop-down), now you can successfully delete options.

As soon as you close dropdown, again, X not working.

I can reproduce this on both chrome emulator and physical device.

durbanski on 14 Dec 2018

just to make it clear. By getting out of element you need to make .chosen-container to drop chosen-container-active class. When chosen-container-active is removed from chosen-container and applied again by new focus, it works well at this moment.

durbanski on 14 Dec 2018

Ok, I'm not sure what exactly is an issue here, but I made it work for me.

First I'm using these options when initializing:

el.chosen({
    display_selected_options: false,
    hide_results_on_select: false,
});

For some reasons chosen is blocking any interactions with controls when you are not focused on a field.

I found that when you click outside field results_hide is called, and this method completely blocks field from accessing (at least on mobile/tablet). So I was looking for a way to prevent this behavior.

It seems that setting results_showing flag to false is causing this bug.

Chosen.prototype.results_hide = function() {
  if (this.results_showing) {
    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  // removed because of mobile issue with removeing options
  // return this.results_showing = false;
};

Removing it from source (inconvenient, but no other choice now), should do the trick.

I'm not sure what is this actually doing, but at the moment I didn't notice any side effects.

durbanski on 14 Dec 2018

👍1

I just disabled chosen for all mobile devices and tablets. Don't know if the build-in touch select interface is more user friendly than the chosen input box. Only missing the search option, but felt anyway strange on a touch device.

Line 590:

    AbstractChosen.browser_is_supported = function() {
      if ("Microsoft Internet Explorer" === window.navigator.appName) {
        return document.documentMode >= 8;
      }
      if (/iP(od|hone)/i.test(window.navigator.userAgent) || /IEMobile/i.test(window.navigator.userAgent) || /Windows Phone/i.test(window.navigator.userAgent) || /BlackBerry/i.test(window.navigator.userAgent) || /BB10/i.test(window.navigator.userAgent) || /Android.*Mobile/i.test(window.navigator.userAgent)) {
        return false;
      }
      if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent))
      {
        return false;
      }
      if (/Android/i.test(window.navigator.userAgent)) {
        if (/Mobile/i.test(window.navigator.userAgent)) {
          return false;
        }
       }
       return true;
     };

Cheers
Hannes