Selects not working on firefox and other browsers occasionally
- I searched and could not find any issues relating to this specific problem I'm having.
- I am using latest version (v1.13.18)
- jQuery 3.2.1, Bootstrap 4.3.1, Bootstrap select 1.13.18. I found this issue using Chrome browser and Firefox browser.
- I can't see to create an isolated test case, as it only happens to me with Firefox.
I'm creating a dashboard for a bot that I have several people who are testing it. In this dashboard, I have a fairly empty select element:
<select class="selectpicker ruletargets" data-live-search="true" title="Loading..." class="permissiontargets" id="removeruletargets" disabled data-size="5"></select>
Later, I have a script that adds options to the above select (and many others, but they are exactly the same as above except different classes + ids), as I request an endpoint which requests a websocket for data, and returns it to the page. I edit them using this piece of code:
} else {
select.html("")
var copt = [`<optgroup label="Cogs">`]
for (let name of json.data.COGS) {
copt.push(`<option value="${name}">${name}</option>`)
}
copt.push("</optgroup>")
select.append(copt.join(""))
var cmopt = [`<optgroup label="Commands">`]
for (let name of json.data.COMMANDS) {
cmopt.push(`<option value="${name}">${name}</option>`)
}
cmopt.push("</optgroup>")
select.append(cmopt.join(""))
}
select.selectpicker({ title: "Choose target" })
select.removeAttr("disabled")
select.selectpicker("refresh")I'm not sure if this is the supported way of editing, but I found a few things online pointing to do it in this way. However, while testing this, my users have figured out that it usually looks fine on Chrome (I did have one person saying it looked like it had on Firefox), but on Firefox, it was just a bulleted list. I was able to reproduce the issue on Firefox, but not on Google Chrome. I have screenshots below so they can be seen. You can also view the full code examples at https://github.com/NeuroAssassin/Red-Dashboard/blob/master/reddash/app/home/templates/guild.html.
Chrome:

Firefox:
and it keeps going afterwards, with the two bottom dropdowns.
Source: snapappointments/bootstrap-select