Reset Picker / set activeIndex = 0

1

Hi All,

I may be missing something obvious in the docs, but is there a way to reset the currently selected value in a Picker (Framework7 v5)?

Scenario is this: I’ve created a quick filter for a list, using the picker to let the user select the filter. If you select a new filter the picker remembers the last selection, which is fine if that view is still active, but if in the meantime the user has cleared the filter, retaining the last selection is a broken UI.

I tried picker.activeIndex = 0, but that didn’t seem to do anything. Probably it’s a read-only property, not a method.

Ta

2

There is a .setValue method in docs, I think you can pass there empty array to unset its value. But better set there new default value

3

Thanks,

It tried picker.cols[0].setValue(‘0’) - (‘0’, a string happens to be the first - default - value in my list). Works as expected in that after reseting the picker value using .setValue, when you open up the picker again it’s back at the top of the list, but it appears to crash the app with no error message. Everything becomes unresponsive… what on Earth am I doing wrong? :wink:

4

So, what I think what’s happening here by trying to use .setValue to reset the pointer is I’m actually screwing with all the values in the picker (although not changing the length of the displayValues), and opening the picker is probably crashing because value length = 1 whereas diisplayValue length > 1. And obviously I’ll want to retain my value list anyway.

So, back to the original question - any way to get the picker to reset which option is selected when you open it a second time (preferably without having to rebuild the entire picker again, given it’s a dynamically built list)?

5

Ok, so the input that displays the current selection has the class ‘input-button-clear’ so the user can reset the filters on the list. What I have noticed is if the user clears the filters via the picker by selecting the initial item (‘No Filters’), it doesn’t hang when you open the picker a second time. But if the user clicks the ‘input-button-clear’ control, it hangs as soon as you reopen the picker - even though I’ve commented out all code listening for that click. So what is it that Framework7 is doing by default when you click ‘input-button-clear’ that could be effecting the picker control?

Here is the code that initialises the picker:

	pickerDevice = app.picker.create({
		inputEl: '#quickFilterValue',
		cols: [{
			textAlign: 'center',
			values: filterTags,
			displayValues: filterTagsDisplay
		}],
		on: {
			close: function(picker) {
				if($('#quickFilterValue').val()=="none") {
					$('#quickFilterInput').val('');
					clearQuickFilter();
				} else {
					$('#quickFilterInput').val(lang['label-quick-filter']+': '+picker.cols[0].displayValue);
					quickFilterIt();
				}
			}
		}
	});

Note, I’ve changed the value of No Filter to ‘none’ rather than ‘0’, just so there wasn’t a type mismatch somewhere.

The function clearQuickFilter() is currently empty (or at least all commented out right now), and quickFilterIt() appears to be working, but I can share if anyone thinks it’s important.