Tags can not be removed on mobile phone if select2 autocomplete option is activated

Created on 12 March 2021, over 3 years ago
Updated 8 August 2024, about 2 months ago

I want to use the "Select 2" module on Drupal 9.

So far it works, but there is one major problem:

For my autocomplete field (user account field) I use the "Select2" widget (form-display).
There are 3 options:
- Field width
- Autocomplete
- Rewrite label

If I turn the "Autocomplete" option on (e.g. to show 10 results), then the tags of my field can not be removed anymore on mobile devices with Android and with Chrome browser.

What can we do to solve this problem? It is a major problem, if tags can not be remove anymore on mobile devices. (Many people are using mobile devices to visit/use sites like those).

Same problem I detected at the "Autocomplete Deluxe" module, see the related issue .

If this is a problem of Drupal core Autocomplete itself, how can we find out if it is? And how can we solve it, no matter if it is here or there. I believe this should be solved as soon as possible.
Thx.

🐛 Bug report
Status

Needs review

Version

1.13

Component

Field widgets

Created by

🇦🇹Austria drupalfan2

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇨🇦Canada mdolnik

    This issue is stemming from the logic in this module's select2.js file in the if (config.multiple) { section at the bottom.

    This logic allows the selected items to be dragged to change the order of the values, but for some reason on mobile when you tap on the close button, it attempts to start dragging the item instead.

    Note: I was able to recreate this issue on mobile chrome, but on mobile firefox the button works as expected.

    The solution for this is to tell the Sortable functionality that it should avoid dragging when tapping on the close button and this can be done by adding filter: '.select2-selection__choice__remove' to the configuration.

    Added a patch to bring in this change as well as add versioning to the library files to ensure cache is busted.

  • 🇫🇮Finland Tuuuukka

    #2 seems to fix it, nice work mdolnik.

    To keep things simple and just fix the issue that's mentioned in the original post, I'd leave the versioning out of the patch though. The versioning could be done as a separate issue/PR/patch.

  • 🇫🇮Finland Tuuuukka

    Here's the correct patch file which includes nothing but the JS fix from #2.

Production build 0.71.5 2024