Trouble with Multi-select on mobile not showing correct results

Zach Anderson

#63887

Hi,

Great plugin and really appreciate the work that goes into supporting something like this. Thanks for that up front.

I’m having trouble figuring a solution for the filtering on mobile. I’m using several multi-select fields with Chosen comboboxes.

The Chosen code/styling seems to drop out on mobile, which is fine, but the functionality of the multi-select alone doesn’t seem to be working as expected. I’ve tried different settings within the plugin, thinking maybe there was a specific piece causing the issue, but haven’t been able to track down anything that works.

Two issues keep popping up in some form

1) The dropdowns select the first item automatically upon opening. Which, if auto-submit is selected, submits the form and requires another set of interactions to unselect.

2) Selecting multiple items doesn’t filter as expected. It seems inconsistent.

I’m guessing both have to do with triggers in javascript firing or not firing, but can’t seem to track down a cause. I’ve tried disabling other plugins and theme javascript but didn’t seem to help there, so hoping you have some ideas. Will post a live link privately in just a moment.

Thanks again.

Add New Note to this Reply

Zach Anderson

#63889

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#63960

Hi Zach. I would to take a look at the form setup, for which I would need admin logins, by private reply.

Add New Note to this Reply

Zach Anderson

#64109

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#64177

the functionality of the multi-select alone doesn’t seem to be working as expected.

We are aware of this issue now and will work towards a solution. Initial testing suggests this is not going to be an easy fix 🙁

I made only one change (to add hide empty to one of the fields). I need you to identify a reliable sequence of steps to show the other errors, if you can? So that I can replicate them here.

Add New Note to this Reply

Zach Anderson

#64267

Sure, some steps and then I’ve made a bit of progress that might help as well.

For the first item
The dropdowns select the first item automatically upon opening. Which, if auto-submit is selected, submits the form and requires another set of interactions to unselect.

Steps to reproduce

1. Set up a filter/form with a multiselect and auto-submit enabled
2. visit the form in a mobile browser (I’m using the iOS simulator with an iPhone 7, iOS 10, but behavior has been consistent)
3. tap the multiselect to open the options

Observed behavior: The first option in the select field is selected automatically on the first tap and because autoupdate is enabled, the results presented are updated. This is even though the first option was never tapped.

Expected behavior: The field should open and allow the user to select one or more options of their choice.

Second item
Selecting multiple items doesn’t filter as expected. It seems inconsistent.

Steps to reproduce

1. Set up a filter/form with a multiselect
2. visit the form in a mobile browser
3. tap the multiselect to open the options
4. if bug #1 is still there, let it refresh results and then tap again to reopen
5. select several options from the list and exit the field (click ‘done’ on the simulator)
6. click submit if autosubmit isn’t enabled

Observed behavior: The results seem to be filtered on everything but the first option selected. If you select three options, the field closes, shows “2 items” and filters on the second and third items selected, but not the first. If you only select 1 item, it shows 0 items and doesn’t seem to be filtering anything by that field. Selects without the option to select multiples seem to be working fine.

Expected behavior: The field should remember all items selected and filter on all items selected as well.

—–

I may have a solution for the first issue. Changing the javascript event used for selects from “change” to “blur” seems to fix it in some quicky testing on mobile without hurting the full desktop interactions.

The change I made is below, just for ease and clarity. You guys are a lot more familiar with this than I am, but hopefully this is on the right track.

I’ll play with the other a bit as well, I have a couple ideas, but wanted to get you some steps to reproduce.

This was lines 2133-2152 in /public/assets/js/search-filter-build.js (after setting the debug flag to true).

		this.initAutoUpdateEvents = function(){

			/* auto update */
			if((self.auto_update==1)||(self.auto_count_refresh_mode==1))
			{
				$this.on('change', 'input[type="radio"], input[type="checkbox"]', function(e)
				{
					self.inputUpdate(200);
				});
				$this.on('blur', 'select', function(e) {
					self.inputUpdate(200);
				});
				$this.on('change', '.meta-slider', function(e)
				{
					self.inputUpdate(200);
				});
				$this.on('input', 'input[type="number"]', function(e)
				{
					self.inputUpdate(800);
				});

Thanks again.

Add New Note to this Reply

Zach Anderson

#64339

Also found this over the weekend that might be helpful

http://stackoverflow.com/questions/34660500/mobile-safari-multi-select-bug

Quoting from there
iOS is automatically selecting the first option after you opened the select (without any user interaction) – but it will not show it to you with the blue select “check”.

The solution seems to be adding a blank disabled option to start each field. It’s not perfect, but in quick testing it seems to fix the problem.

Example given

<select multiple">
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>

I just added the disabled optgroup to /public/includes/class-search-filter-generate-input.php before the options are added.

Will test both some more tomorrow when back at work. Please let me know if you have any progress or thought on these possible solutions. I’m going to need to launch a site shortly and may just need to go with these even if they aren’t ideal.

Thanks.

Add New Note to this Reply

Trevor Moderator

#64382

Thanks for that, I will pass it on to the developer, Ross.

Add New Note to this Reply

Zach Anderson

#64943

Just an update here. I got this working well on mobile by adding the disabled optgroup outlined above and then switching to Select2 from Chosen for comboboxes.

I think it may have been fixable with Chosen by using the “blur” event for mobile and the “change” event whenever Chosen is in use, but I spent a lot of time chasing Chosen documentation and never got it working 100%.

But, for future reference, the disabled optgroup and Select2 worked in all of our testing and got us launched.

Is there any way to ensure the one change to /public/includes/class-search-filter-generate-input.php isn’t overwritten when the plugin updates? I won’t always be administering the site.

Thanks again.

Add New Note to this Reply

Ross Moderator

#66062

Hey Zach

Just to note this thread has not been forgotten.

I shall be getting to it shortly, and thanks for the valuable feedback above..

I’ll get back to you once I’ve digested it all properly should I have any further info/questions.

Thanks

Add New Note to this Reply

[Author]

Posts