iPhone Dropdown issue, when selecting an item - it selects the one above ?

Strange but it affect only iPhones, tested on android Samsung works perfect, tested on Laptop Microsoft Edge & Chrome works perfect… Completely puzzled? Any solution to that? Is my code correct? Please help
https://www.fuelspy.ie/edit-station

I tried your site on iPhone and it worked as expected. I couldn’t see any issue.

Dear J.D.

When selecting: County → (choose Mayo) Town → (choose Killkelly) and then you will see that it picks up the one above or bellow? And if you will scroll a few down pass Killkelly and then come back to Killkelly it will select something else… I just used Killkelly for this explanation… But you can try with Mullrany or Kiltimagh - the result is pretty much the same all over the place…?

Sincerely,
Paul

import wixData from 'wix-data';

// Function to get geolocation

import wixWindow from 'wix-window';

// Function to get current geolocation of the user

// Javascript Class to manage dropdown data filtering

// When an object created from this class is given a dataset with the fields 'county', 'town', 'brand', 'title' and 'evcar'

// The object will generate unique column lists formatted to be passed directly to a $w.DropDown.options property.

class dropDownData {

    constructor(recordList = []) {

 this.updateRecordList(recordList);

    }

 

 // Call this function to initialise the object data set and reset the column lists.

    updateRecordList(recordList) {

 this.list = recordList;

 this.resetFieldLists();

    }

 

    resetFieldLists() {

 this.countys = [];

 this.towns = [];

 this.brands = [];

 this.titles = [];

 this.evcars = [];

    }

 

// Returns a unique list based on the values in the countys column

 // The list contains objects with key value pairs for the keys 'label' and 'value'

    countysList() {

 if (this.countys.length === 0) {

 // We haven't initialised countyList yet yet so set it up

 this.countys = this.uniqueColumnListForField('county');

        }

 return this.countys;

    }

 

 // Returns a unique list based on the values in the town column

 // The list contains objects with key value pairs for the keys 'label' and 'value'

    townsList() {

 if (this.towns.length === 0) {

 // We haven't initialised townList yet yet so set it up

 this.towns = this.uniqueColumnListForField('town');

        }

 return this.towns;

    }

 

 // Returns a unique list based on the values in the brand column

 // The list contains objects with key value pairs for the keys 'label' and 'value'

    brandsList() {

 if (this.brands.length === 0) {

 // We haven't initialised brandList yet so set it up

 this.brands = this.uniqueColumnListForField('brand');

        }

 return this.brands;

    } 

    titlesList() {

 if (this.titles.length === 0) {

 // We haven't initialised titleList yet so set it up

 this.titles = this.uniqueColumnListForField('title');

        }

 return this.titles;

    }

    evcarsList() {

 if (this.evcars.length === 0) {

 // We haven't initialised evcarList yet so set it up

 this.evcars = this.uniqueColumnListForField('evcar');

        }

 return this.evcars;

    }  

 // Helper method for extracting column records and making them unique

 // All list methods use this to generate list containing objects with

 // key value pairs for the keys 'label' and 'value' which is expected

 //by the $w.DropDown.options property

    uniqueColumnListForField(field) {

 let result = [];

 let uniqueValues = []; // Used to ensure values in the list are unique

 this.list.forEach(item => {

 let fieldValue = item[field];

 // Only store field values that we haven't yet seen. Skip null values

 if (fieldValue && !uniqueValues.includes(fieldValue)) {

                uniqueValues.push(fieldValue); // Remember this value to maintain uniqueness

 // Save the resulting information in the format required by the DropDown options list.

                result.push({'label':fieldValue, 'value':fieldValue});

            }

        });

 // Return the list sorted by the label of the options list.

 return sortObjectArrayBy(result, "label");

    }

}

// Dedicated function that can be used to sort an array of objects. It takes the array and the name of the object property to sort by.
function sortObjectArrayBy(objectArray, objectProperty = "label") {
 // Check if we have an array
 let result = objectArray;
 if (objectArray instanceof Array) {
 // We have a valid Array lets get the list of properties
 // We will use the sort function which uses a compare function to determine how to sort the array
        result = objectArray.sort((a,b) => {
 // a and b contain objects from the array to compare.
 // We will sort by the objectProperty so extract the property value to compare with
 let propertyA = a[objectProperty];
 let propertyB = b[objectProperty];
 let compareResult = 0; // Default the same
 if (typeof propertyA === "string" && typeof propertyB === "string") {
 // We have two values to compare
                compareResult = propertyA.localeCompare(propertyB);
            }
 return compareResult;
        });
    }
 return result;
} 

let dropDownRecords = new dropDownData();

 

$w.onReady(function () {

 //We initialise the drop downs here once the data we need is available.

    $w('#dataset1').onReady(() => {

        updateDropDownOptions();

    });

});

 

// We update the drop down lists from the currently filtered dataset.

// The data set is filtered by values from the drop down lists

function updateDropDownOptions() {
 // Use getItems to load all items available from the filtered dataset
 // When we apply a filter (see updateRepeaterFilter()) this gets called to reload the drop downs
    $w('#dataset1').getItems(0, $w('#dataset1').getTotalCount())
        .then((results) => {
 // Update our dropdown object with the new data record list
            dropDownRecords.updateRecordList(results.items);
 // Load/Reload dropdown data sets from our dropdown list data object
            $w('#countyList').options = dropDownRecords.countysList();
            $w('#townList').options = dropDownRecords.townsList();
            $w('#brandList').options = dropDownRecords.brandsList();
            $w('#titleList').options = dropDownRecords.titlesList();
        });
}


// Function to filter dataset based upon the filter drop down values

function updateRepeaterFilter() {

 // Empty filter will remove existing filters so if none of the dropdowns have values all

 // Table records will be available to the repeater.

 let repeaterFilter = wixData.filter();

 // If we have any filter values we simply join them together using .eq()

 if ($w('#countyList').value) {

        repeaterFilter = repeaterFilter.eq('county', $w('#countyList').value);

    }

 if ($w('#townList').value) {

        repeaterFilter = repeaterFilter.eq('town', $w('#townList').value);

    }

 if ($w('#brandList').value) {

        repeaterFilter = repeaterFilter.eq('brand', $w('#brandList').value);

    }

 if ($w('#titleList').value) {

        repeaterFilter = repeaterFilter.eq('title', $w('#titleList').value);

    }


 // Update the filter on the dataset

    $w('#dataset1').setFilter(repeaterFilter)

    .then(() => {

 // When we get here the dataset will be filtered so we need to reset the drop downs from the

 // newly filtered record list

        updateDropDownOptions();

    });

}

// Helper functions triggered when we make a filter list selection in a drop down

export function countyList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#townList').enable();

}

 

export function townList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#brandList').enable();

}

export function brandList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();
    $w('#titleList').enable();

}

export function titleList_change(event) {

 //Add your code for this event here:

    updateRepeaterFilter();

        $w('#button20').enable();
        $w('#input1').show();
        $w('#text128').show();
        $w("#image2").show();

    $w('#dropdown4').enable();
    $w('#input5').enable();
    $w('#dropdown2').enable();
    $w('#button21').enable();
    $w('#image1').show();
    $w('#box29').show();

        $w('#dropdown4').value = $w("#dataset1").getCurrentItem().brand;
        $w("#image1").src = $w("#dataset1").getCurrentItem().logo;
        $w('#input5').value = $w("#dataset1").getCurrentItem().title;
        $w('#dropdown2').value = $w("#dataset1").getCurrentItem().evcar;

 let Logo = $w("#dataset1").getCurrentItem().logo;
            $w("#dataset4").setFieldValue('newLogo', Logo);
            $w("#dataset4").setFieldValue('oldLogo', Logo);

 let pbrand = $w("#dataset1").getCurrentItem().brand;
            $w('#dataset4').setFieldValue("newBrand", pbrand);

 let ptitle = $w("#dataset1").getCurrentItem().title;
            $w('#dataset4').setFieldValue("newTitle", ptitle);

 let pevcar = $w("#dataset1").getCurrentItem().evcar;
            $w('#dataset4').setFieldValue("evcar", pevcar);

}


 

// Because the filter for the repeater uses multiple fields and these result in restricting the dropdown

// Option lists we need to reset the drop down lists to undefined to get all of the options back and

// repopulate the repeater.

// We could have a reset option as a button next to each drop down or add a drop down option of reset but this

// works for the purposes of this example

export function resetButton_click(event, $w) {

 // Reset the filter list undefined forces the dropdown placeholder text to be displayed.

    $w('#countyList').selectedIndex = undefined;
    $w('#countyList').resetValidityIndication();

    $w('#townList').selectedIndex = undefined;
    $w('#townList').resetValidityIndication();

    $w('#brandList').selectedIndex = undefined;
    $w('#brandList').resetValidityIndication();

    $w('#titleList').selectedIndex = undefined;
    $w('#titleList').resetValidityIndication();    

    $w('#input1').value = undefined;
    $w('#input1').resetValidityIndication();

    $w('#text128').text = "Current Station Address, Google Maps Location";

    $w('#townList').disable();
    $w('#brandList').disable();
    $w('#titleList').disable();

        $w('#button20').disable();
        $w('#input1').hide();
        $w('#text128').hide();
        $w("#image2").hide();

    $w('#dropdown4').disable();
    $w('#input5').disable();
    $w('#dropdown2').disable();
    $w('#button21').disable();
    $w('#image1').hide();
    $w('#box29').hide();
 

 // With no drop down values selected the repeater filter will be cleared and all repeater items

 // will be displayed

    updateRepeaterFilter();

}

I tried it (on iPhone, Safari) and it didn’t happen to me.

Dear J.D.

I Use iPhone XR mine and Wife has XR what iphone do you tested on? and are you trying on Edit Station page? or what page are you tested on?

Thank you,
Sincerely,
Paul

Now I see it

I can see it. I guess it’s something in your code, Please remove all the comments from you code and the empty lines, so It’ll be shorter and easy to to read.

import wixData from ‘wix-data’;

import wixWindow from ‘wix-window’;

class dropDownData {
constructor(recordList = []) {
this.updateRecordList(recordList);
}

updateRecordList(recordList) { 
    this.list = recordList; 
    this.resetFieldLists(); 
} 

resetFieldLists() { 
    this.countys = []; 
    this.towns = []; 
    this.brands = []; 
    this.titles = []; 
    this.evcars = []; 
} 

countysList() { 
    if (this.countys.length === 0) { 
        this.countys = this.uniqueColumnListForField('county'); 
    } 
    return this.countys; 
} 

townsList() { 
    if (this.towns.length === 0) { 
        this.towns = this.uniqueColumnListForField('town'); 
    } 
    return this.towns; 
} 

brandsList() { 
    if (this.brands.length === 0) { 
         this.brands = this.uniqueColumnListForField('brand'); 
    } 
    return this.brands; 
}  

titlesList() { 
    if (this.titles.length === 0) { 
        this.titles = this.uniqueColumnListForField('title'); 
    } 
    return this.titles; 
} 

evcarsList() { 
    if (this.evcars.length === 0) { 
        this.evcars = this.uniqueColumnListForField('evcar'); 
    } 
    return this.evcars; 
}   

uniqueColumnListForField(field) { 
    let result = []; 
    let uniqueValues = [];  
    this.list.forEach(item => { 
        let fieldValue = item[field]; 
        if (fieldValue && !uniqueValues.includes(fieldValue)) { 
            uniqueValues.push(fieldValue);  
            result.push({'label':fieldValue, 'value':fieldValue}); 
        } 
    }); 
    return sortObjectArrayBy(result, "label"); 
} 

}

function sortObjectArrayBy(objectArray, objectProperty = “label”) {
let result = objectArray;
if (objectArray instanceof Array) {
result = objectArray.sort((a,b) => {
let propertyA = a[objectProperty];
let propertyB = b[objectProperty];
let compareResult = 0; // Default the same
if (typeof propertyA === “string” && typeof propertyB === “string”) {
compareResult = propertyA.localeCompare(propertyB);
}
return compareResult;
});
}
return result;
}

let dropDownRecords = new dropDownData();

$w.onReady(function () {
$w(‘#dataset1’).onReady(() => {
updateDropDownOptions();
});
});

function updateDropDownOptions() {
$w(‘#dataset1’).getItems(0, $w(‘#dataset1’).getTotalCount())
.then((results) => {
dropDownRecords.updateRecordList(results.items);
$w(‘#countyList’).options = dropDownRecords.countysList();
$w(‘#townList’).options = dropDownRecords.townsList();
$w(‘#brandList’).options = dropDownRecords.brandsList();
$w(‘#titleList’).options = dropDownRecords.titlesList();
});
}

function updateRepeaterFilter() {
let repeaterFilter = wixData.filter();
if ($w(‘#countyList’).value) {
repeaterFilter = repeaterFilter.eq(‘county’, $w(‘#countyList’).value);
}
if ($w(‘#townList’).value) {
repeaterFilter = repeaterFilter.eq(‘town’, $w(‘#townList’).value);
}
if ($w(‘#brandList’).value) {
repeaterFilter = repeaterFilter.eq(‘brand’, $w(‘#brandList’).value);
}
if ($w(‘#titleList’).value) {
repeaterFilter = repeaterFilter.eq(‘title’, $w(‘#titleList’).value);
}

$w(‘#dataset1’).setFilter(repeaterFilter)
.then(() => {
updateDropDownOptions();
});
}

export function countyList_change(event) {
updateRepeaterFilter();
$w(‘#townList’).enable();
}

export function townList_change(event) {
updateRepeaterFilter();
$w(‘#brandList’).enable();
}

export function brandList_change(event) {
updateRepeaterFilter();
$w(‘#titleList’).enable();
}

export function titleList_change(event) {
updateRepeaterFilter();
$w(‘#button20’).enable();
$w(‘#input1’).show();
$w(‘#text128’).show();
$w(“#image2”).show();

$w('#dropdown4').enable(); 
$w('#input5').enable(); 
$w('#dropdown2').enable(); 
$w('#button21').enable(); 
$w('#image1').show(); 
$w('#box29').show(); 

    $w('#dropdown4').value = $w("#dataset1").getCurrentItem().brand; 
    $w("#image1").src = $w("#dataset1").getCurrentItem().logo; 
    $w('#input5').value = $w("#dataset1").getCurrentItem().title; 
    $w('#dropdown2').value = $w("#dataset1").getCurrentItem().evcar; 

        let Logo = $w("#dataset1").getCurrentItem().logo; 
		$w("#dataset4").setFieldValue('newLogo', Logo); 
        $w("#dataset4").setFieldValue('oldLogo', Logo); 

        let pbrand = $w("#dataset1").getCurrentItem().brand; 
        $w('#dataset4').setFieldValue("newBrand", pbrand); 

        let ptitle = $w("#dataset1").getCurrentItem().title; 
        $w('#dataset4').setFieldValue("newTitle", ptitle); 

        let pevcar = $w("#dataset1").getCurrentItem().evcar; 
        $w('#dataset4').setFieldValue("evcar", pevcar); 

}

export function resetButton_click(event, $w) {

$w('#countyList').selectedIndex = undefined; 
$w('#countyList').resetValidityIndication(); 

$w('#townList').selectedIndex = undefined; 
$w('#townList').resetValidityIndication(); 

$w('#brandList').selectedIndex = undefined; 
$w('#brandList').resetValidityIndication(); 

$w('#titleList').selectedIndex = undefined; 
$w('#titleList').resetValidityIndication();     

$w('#input1').value = undefined; 
$w('#input1').resetValidityIndication(); 

$w('#text128').text = "Current Station Address, Google Maps Location"; 

$w('#townList').disable(); 
$w('#brandList').disable(); 
$w('#titleList').disable(); 

    $w('#button20').disable(); 
    $w('#input1').hide(); 
    $w('#text128').hide(); 
    $w("#image2").hide(); 

$w('#dropdown4').disable(); 
$w('#input5').disable(); 
$w('#dropdown2').disable(); 
$w('#button21').disable(); 
$w('#image1').hide(); 
$w('#box29').hide(); 

updateRepeaterFilter(); 

}

Too long to read. But I can see there’s also a problem on Windows:
When you select a town you can no longer switch to another town without resetting the whole form. So go through your code and try to find out where you have a bug (I’m sorry I can’t look into the details. Maybe someone else can).

Thank you J.D. understand… Will put on glasses and back to drawing board :))) p.s. i purposelessly done disable option when you select one of the dropdowns, so customers will have to reset the form to avoid mistakes. Thank you for your time and attention
Sincerely,
Paul

(after 24 hours of vigorous bug checking and half a ton of coffee )

Dear J.D. I checked everything, and the good news are - the code is perfect and it works like swiss watch… My mistake was absolutely ridiculously stupid, (I simply didn’t see the Elephant!!!), instead of digging in to Arrays and Variables, i should of just check how i linked my dataset to the dropdowns??? I must admit - Wix is fantastic platform and before complaining about it I should of checked my own silly mistakes… Anyway… If everybody needs the code - it is perfectly functional, just do not connect your dropdowns to the dataset, as it is done by code.

Sincerely,
Paul