Dropdown working in browser but not mobile view

Ask the community
,
1

I have a page set up with a dropdown menu which produces data in a repeater subject to the choice made in the dropdown.

The page is coded as below:

import wixData from 'wix-data'
import wixLocation from 'wix-location'

$w.onReady(function () {
    $w('#dropdown1').onChange(genericFilterHandler);
    $w('#input1').onKeyPress(genericFilterHandler);
    $w('#input2').onKeyPress(genericFilterHandler);
    $w('#input3').onKeyPress(genericFilterHandler);
    $w('#input4').onKeyPress(genericFilterHandler);
    uniqueDropDown1();
    
});

function uniqueDropDown1 (){
    
    wixData.query("2022News")
    .contains("title", "June")
    .isNotEmpty('number')
        .descending("title")
        .limit(1000)
        .find()
        .then(results =>{
                
            const uniqueTitles = getUniqueTitles(results.items);
            let AllOption = [{"label":"All June 2022", "value":"All June 2022"}];
            let dropdown1 = buildOptions(uniqueTitles);
            $w('#dropdown1').options = AllOption.concat(dropdown1);
            })
            .catch((err) =>{
                console.log(err)
            });
}

    function getUniqueTitles(items) {
        
        
        const titlesOnly = items.map(item => item.title);
        return [...new Set(titlesOnly)];
        }   
    
    function buildOptions(uniqueList){
        return uniqueList.map(curr => {
        return {label:curr, value:curr};
        });
        
    }

export function dropdown1_change_1(event, $w){
debounceTimer = setTimeout(() => {
$w('#input1').enable();
$w('#input2').enable();
$w('#input3').enable();
$w('#input4').enable();
$w('#repeater1').expand();
$w('#input1').value = null;
$w('#input2').value = null;
$w('#input3').value = null;
$w('#input4').value = null;

},900);
}

let debounceTimer;

function genericFilterHandler(event) {

    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
debounceTimer = setTimeout(() => {
    
    let masterFilter = wixData.filter().contains("month", "June");
    let title = $w('#dropdown1').value;
    let input1 = $w('#input1').value;
    let input2 = $w('#input2').value;
    let input3 = $w('#input3').value;
    let input4 = $w('#input4').value;

    
    if (title && title !== "All June 2022") {
        masterFilter = masterFilter.eq("title", title);
    }

    if (input1) {
    masterFilter = masterFilter.contains("number", input1);

    }
    if (input2) {
        let operatorFilter = wixData.filter().contains("operator", input2);
        let shortNameFilter = wixData.filter().contains("shortName", input2);
        masterFilter = masterFilter.and(operatorFilter.or(shortNameFilter));
        
    }

    if (input3) {
        masterFilter = masterFilter.contains("class", input3);
    }

    if (input4) {
        masterFilter = masterFilter.contains("detail", input4)
    }
    
    
$w('#dynamicDataset').setFilter(masterFilter);
 }, 500);
 }

Everything works fine when using it in browser view but the dropdown doesn’t react and show the options within it when trying to click on it in mobile view.

I have gone through Wix Support who advised me to make a tweak to the above code, which I have done, but the problem seems to remain.

Any ideas as to what is causing it to work in one view but not the other?

2

Did you find a solution to this? I have the exact same issue.

I haven’t used any coding yet, I’ve just used wix’s drag and drop tools to build my site.

I am using two dropdown menus that are fully functional on the web browser version of my site but they don’t work on the mobile version.

Like yours, they are connected to a repeater and produce data based on the viewers dropdown selection.

Any help to get these dropdown menus working on mobile would be massively appreciated!