Wrong clickable area of a button on mobile

Question

This is my website . I'm currently working on multi-choice filters, or rather on resetting them. There is no problem on PC. Click the X button and it clears the filter

But the same simple thing doesn't work like this on mobile devices. I don't understand why. You need to click an area below the X button, well below, to dismiss the filter. This is how you need to click to make it work

Also, I just realized that when clicking like this there is an error in the console. Error in the console after successful dismissing

I'm testing the mobile behavior in Opera (PC version, last update) using the Inspector with mobile simulation; the device is irrelevant. You can try it too.

The same behavior occurs on an actual android, both in Chrome and Opera.

Side notes!

1. If you activate the dropdown search in any multichoice field, while it's visible, the close buttons work perfectly well and precisely on mobiles. (Although the behavior of this dropdown panel is weird too. It does not always drops down when focusing on a field, as it does on PC.)

2. When I tried to locate the close button using the console and Jquery and then applied.click(), it worked. So I guess the problem doesn't lie in JS.

3. If you want to test it on a phone choose the Desktop site. On the mobile view, though, another peculiar thing occurs-the blue X button to the right of the field doesn't work.

PS. I've been wracking my brains for 3 hours to solve this mystery, yet no result. Please help!

Answer 1

The culprit was the "chosen" plugin. Don't use this crappy plugin. They simply don't support mobile devices and have tons of bugs.

I switched to Select2 and everything is great.