Pumpedplop's post in Dropdown not sorting properly was marked as the answer
I contacted caspio support and they were able to create the code below for my datapage.
This code should be installed in the footer. Hopefully this helps someone else with the same problem.
<script>
if (typeof getValuesArr=='undefined') {
const INPUT_SELECTOR = '[id^="Value3_1"]'
const getValuesArr = HTMLSelect => {
let valuesArr = []
HTMLSelect.querySelectorAll('option').forEach(option=>{
valuesArr.push(option.value)
})
return valuesArr
}
const sortValuesArr = numbersAsStr => {
numbersAsStr.sort((a, b) => {
if (parseInt(a) > parseInt(b))
return 1
if (parseInt(a) < parseInt(b))
return -1
return 0
})
return numbersAsStr
}
const generateOptionsTemplate = (sortedValuesArr) => {
let optionsTemplateStr = ''
for (let i=0; i<sortedValuesArr.length;i++) {
optionsTemplateStr += `<option custom-sorting="sorted" value="${sortedValuesArr[i]}">${sortedValuesArr[i]}</option>`
}
return optionsTemplateStr
}
const addObserver = (HTMLEl) => {
new MutationObserver( (mutations) => {
console.log('mutation fired')
for (let i=0; i<mutations.length; i++) {
if(mutations[i].target != document.querySelector(INPUT_SELECTOR)) continue
if(mutations[i].addedNodes.length == 0) continue
if (mutations[i].addedNodes[0].getAttribute('custom-sorting') == 'sorted') {
break}
if (mutations[i].addedNodes[0].tagName == 'OPTION') {
window.setTimeout(()=>{
document.querySelector(INPUT_SELECTOR).innerHTML=generateOptionsTemplate(sortValuesArr(getValuesArr(document.querySelector(INPUT_SELECTOR))))
}, 250)
break
}
}
}).observe(document.querySelector('body'), {childList: true, subtree: true})
}
//document.querySelector(INPUT_SELECTOR).parentElement.parentElement
const mainFun = () => {
const input = document.querySelector(INPUT_SELECTOR)
input.innerHTML = generateOptionsTemplate(sortValuesArr(getValuesArr(input)))
addObserver(input)
document.removeEventListener('DataPageReady', mainFun )
}
document.addEventListener('DataPageReady', mainFun )
}
</script>
