filter_horizontal and filter_vertical don't work on mobile Safari

[anonymous]

Create a ModelAdmin for a model with a ManyToManyField. Specify that it should display using filter_horizontal or filter_vertical. Confirm that it works fine in a desktop browser (Firefox or Chrome). But fire it up on an iPad and see the two widgets appear with "0 Items" listed instead of the actual items. The admin widgets are non-functional.

[anonymous]

FWIW, I switched on Safari's Debug Mode, and all it says is "No Errors" in the console. Not much help.

[Gabriel Hurley]

I can confirm the problem on my iPhone 4 running iOS 4.2. If you tap in the box for the filter horizontal widget you'll actually get an iPhone interface for doing multiple selection that works. The whole business just looks wrong and is counterintuitive/unhelpful.

I'd guess this is related to how mobile safari treats certain classes of html input elements. I'm not an expert on mobile browsers though, so I can't provide too much more info. A quick search on Google reveals similar complaints with no simple solutions other than serving a plain HTML widget to mobile devices and letting their own interface sort it out.

[Aymeric Augustin]

Change UI/UX from NULL to False.

[Aymeric Augustin]

Change Easy pickings from NULL to False.

[Aymeric Augustin]

Revert accidental batch modification.

[elky]

Both widgets (horizontal and vertical) work for me on iOS 8. One only thing is that confusing "0 items" label. This is standard behaviour that means "0 items selected". If you tap on the dropdown you're be able to select multiple items in the list. When you done - label will be changed to "<num> items" where <num> is number of items you selected. I think it should be fine for iOS users who are accustomed to use select multiple on other websites.

Few screenshots to show how it works:

1. Vertical filter initial state - ​https://dl.dropboxusercontent.com/u/2573685/django-filter/1.jpg
2. Tap on 'Available' filter to see list of available items - ​https://dl.dropboxusercontent.com/u/2573685/django-filter/2.jpg
3. Tap on items you need to select - ​https://dl.dropboxusercontent.com/u/2573685/django-filter/3.jpg
4. State after tapping 'Done' - ​https://dl.dropboxusercontent.com/u/2573685/django-filter/4.jpg
5. Tap on 'Chosen' filter - ​https://dl.dropboxusercontent.com/u/2573685/django-filter/5.jpg

Of course UX of this thing is awful but one only thing we can do here is to move selected items to 'Chosen' right after tapping 'Done' avoiding user to tap on arrow icon. But this is separate issue I believe that should be done within whole admin mobile optimisation.

Thoughts?

[Tim Graham]

A separate ticket for a better mobile experience sounds like a good idea.