I am experiencing an issue with Bootstrap Dual Listbox wherein both the selected and non-selected lists are superimposed with a "0 selected" message in Chromium-based mobile browsers. The lists are not visible but are selectable by tapping on the down arrow on right side of the respective controls. Please note, this behavior is not observed in Firefox nor is it a problem in Windows-based Chromium browsers.
I have included the following screen shot for illustration purposes:
The screen shot is taken from Google Chrome on a Samsung Galaxy S8+ running Android Pie.
I have validated that the non-selected list is refreshed and options are selectable via the down arrow on the right side of the control. Likewise, after selecting and moving an option, the option is visible in the selected list by tapping on the down arrow on the control.
My constructor for each instance of the plug-in is as follows:
$("#CrewMembers").bootstrapDualListbox({
showFilterInputs: false,
infoText: false,
moveOnSelect: true,
infoTextEmpty: false
});
I am new to Bootstrap Dual Listbox and I would like to continue using it. Any assistance would be greatly appreciated.
UPDATE (7/23/2020):
I replaced the Bootstrap Dual Listbox plug-in with an equivalent jQuery/Javascript plug-in (jQuery Dualselect) and got the same result. This issue appears to reside with Chromium and not the plug-ins.
An issue has been submitted to the Chromium development team.
