On sorting a jsp <select> element items vanishes - sorting

Question

I have two listbox in a .jsp page with Add(+) and Remove(-) buttons in between. Two list boxes are 'Available Items' (left) and 'Selected Items'(right). 'Available Items' list box displays all the available items on page load fetching from DB, and 'Selected Items' listbox displays blank. User can add one item from left to right in 'Selected Items' listbox.
I have written code to move the items from both sides and vice versa. But the problem is when I am clicking 'Add' button to move the item from left to right, the item is moved properly to right listbox but the left list ('Available Items') items are getting vanished and reappears only after doing a click event the listbox which is weird from UI devlpment perspective. The same is happening for Remove button click. I hope there is some refresh issue underline. I am posting the codes below.
N.B : I have written a sort method to sort the items in the listbox. I troubleshooted that if I close calling the method sortItemsList() then everything is working fine.
Code for the listbox :
<tr>
<td>
<select id="leftItemList" size="8" multiple="multiple" style="height:auto"></select>
<input type="button" name="moveItemsToLeft" id="buttonAddItems" class="selectBoxAddButton checkboxDependent" value="Add >>" />
<input type="button" id="buttonRemoveItems" class="selectBoxRemoveButton checkboxDependent" value="<< Remove" />
<select id="rightItemList" size="8" multiple="multiple" style="height:auto"></select>
</td>
</tr>
Corresponding code for sort in javascript that is causing the issue :
Code for adding and removing items:
$('#buttonAddItems').click(function(){ //Moving items from left to right
var elementFrom = document.getElementById('leftItemList');
var element = document.getElementById('rightItemList');
var len = element.options.length;
var elementFromLength = elementFrom.length;
for ( var i = (elementFromLength - 1); i >= 0; i--) {
if ((elementFrom.options[i] != null) && (elementFrom.options[i].selected == true)) {
var selectedItemLength = $("#leftItemList :selected").length;
element.options[len] = new Option(
elementFrom.options[i].text,
elementFrom.options[i].value);
len++;
elementFrom.options[i] = null;
}
}
sortItemsList(); //Commenting this call fixes the problem
});
$('#buttonRemoveItems').click(function(){ //Moving items from right to left
var element = document.getElementById('rightItemList');
var elementTo = document.getElementById('leftItemList');
var len = element.options.length;
var elementFromLength = elementTo.length;
for ( var i = (len - 1); i >= 0; i--) {
if ((element.options[i] != null) && (element.options[i].selected == true)) {
elementTo.options[elementFromLength] = new Option(
element.options[i].text,
element.options[i].value);
elementFromLength++;
element.options[i] = null;
}
}
sortItemsList(); //Commenting this call fixes the problem
});
function sortItemsList(){
var options = $("#leftItemList option"); // Collect options
options.detach().sort(function(a,b) { // Detach from select, then Sort
var at = $(a).text();
var bt = $(b).text();
return (at > bt)?1:((at < bt)?-1:0); // Tell the sort function how to order
});
options.appendTo("#leftItemList");
}
N.B : The code for sorting that I used is taken from reference whose URL is below. Have tried both Approaches. None of them is working. I do have same '3.4.1/jquery.min.js' as in reference -
https://www.geeksforgeeks.org/how-to-sort-option-elements-alphabetically-using-jquery/

Answer 1

#Swati I am having the same problem running your code in jsfiddle (which you are running successfully). So the problem is with Chrome version. My chrome version is 'Version 81.0.4044.113 (Official Build) (64-bit)'. I guess yours is 'Chrome version 80.0.3987.122' one version older than me with which it is working fine. Finally the observations are as below.
Observations
In the higher chrome version, the code is working fine till sorting. But when the code is trying to append the sorted itemList into existing itemList object, there was some issues with DOM manipulation with latest chrome version against appendTo() method, which means appendTo() method is adding sorted itemList into existing DOM element but refresh or reload is not happening with that DOM element. That's why the vanished itemList drop down is getting all the values after a mouse click event on the drop down manually.
In order to fix this issue, we need to do manual refresh. We can do the refresh or reload by two different ways as mentioned below.
Approach 1 :
Adding the below line after itemList append.
$("#leftItemList").html($("#leftItemList").html());
Approach 2 :
We can set the focus on leftItemList element after append. If we follow this approach, when we click Add button it will add the item list to right side but the focus will be there is the leftItemList drop down.
$("#leftItemList").focus();
So Approach 1 is the preferable solution.