Toolbox folder control: Save preferences and reload is broken

relates to xibosignageltd/xibo-private#823

ui/src/core/xibo-cms.js

@@ -3156,8 +3156,17 @@ function ToggleFilterView(div) {
  * @param element
  * @param parent
  * @param dataFormatter
+ * @param addRandomId
  */
-function makePagedSelect(element, parent, dataFormatter) {
+function makePagedSelect(element, parent, dataFormatter, addRandomId = false) {
+    // If we need to append random id
+    if (addRandomId === true) {
+        const randomNum = Math.floor(1000000000 + Math.random() * 9000000000);
+        const previousId = $(element).attr('id');
+        const newId = previousId ? previousId + '_' + randomNum : randomNum;
+        $(element).attr('data-select2-id', newId);
+    }
+
     element.select2({
         dropdownParent: ((parent == null) ? $("body") : $(parent)),
         minimumResultsForSearch: (element.data('hideSearch')) ? Infinity : 1,
@@ -3278,6 +3287,8 @@ function makePagedSelect(element, parent, dataFormatter) {
     ) {
         var initialValue = element.data("initialValue");
         var initialKey = element.data("initialKey");
+        var textProperty = element.data("textProperty");
+        var idProperty = element.data("idProperty");
         var dataObj = {};
         dataObj[initialKey] = initialValue;
 
@@ -3292,23 +3303,37 @@ function makePagedSelect(element, parent, dataFormatter) {
             type: 'GET',
             data: dataObj
         }).then(function(data) {
+            // Do we need to check if it's selected
+            var checkSelected = false;
+
             // If we have a custom data formatter
             if (
                 dataFormatter &&
                 typeof dataFormatter === 'function'
             ) {
                 data = dataFormatter(data);
+                checkSelected = true;
             }
 
             // create the option and append to Select2
             data.data.forEach(object => {
-                var option = new Option(
-                    object[element.data("textProperty")],
-                    object[element.data("idProperty")],
-                    true,
-                    true
-                );
-                element.append(option)
+                var isSelected = true;
+
+                // Check if it's selected if needed
+                if(checkSelected) {
+                    isSelected = (initialValue == object[idProperty]);
+                }
+
+                // Only had if the option is selected
+                if (isSelected) {
+                    var option = new Option(
+                        object[textProperty],
+                        object[idProperty],
+                        isSelected,
+                        isSelected
+                    );
+                    element.append(option)
+                }
             });
 
             // Trigger change but skip auto save
@@ -3334,8 +3359,17 @@ function makePagedSelect(element, parent, dataFormatter) {
  * Make a dropwdown with a search field for option's text and tag datafield (data-tags)
  * @param element
  * @param parent
+ * @param addRandomId
  */
-function makeLocalSelect(element, parent) {
+function makeLocalSelect(element, parent, addRandomId = false) {
+    // If we need to append random id
+    if (addRandomId === true) {
+        const randomNum = Math.floor(1000000000 + Math.random() * 9000000000);
+        const previousId = $(element).attr('id');
+        const newId = previousId ? previousId + '_' + randomNum : randomNum;
+        $(element).attr('data-select2-id', newId);
+    }
+
     element.select2({
         dropdownParent: ((parent == null) ? $("body") : $(parent)),
         matcher: function(params, data) {

ui/src/editor-core/toolbar.js

@@ -2325,11 +2325,11 @@ Toolbar.prototype.mediaContentHandleInputs = function(
 
   // Initialize user list input
   const $userListInput = $mediaForm.find('select[name="ownerId"]');
-  makePagedSelect($userListInput);
+  makePagedSelect($userListInput, $mediaContainer, null, true);
 
   // Initialize folder input
   const $folderInput = $mediaForm.find('select[name="folderId"]');
-  makePagedSelect($folderInput, null, function(data) {
+  makePagedSelect($folderInput, $mediaContainer, function(data) {
     // Format data
     const newData = [];
 
@@ -2355,7 +2355,7 @@ Toolbar.prototype.mediaContentHandleInputs = function(
     return {
       data: newData,
     };
-  });
+  }, true);
 
   // Initialize other select inputs
   $mediaForm
@@ -2661,7 +2661,7 @@ Toolbar.prototype.layoutTemplatesContentPopulate = function(menu) {
 
   // Initialize folder input
   const $folderInput = $searchForm.find('select[name="folderId"]');
-  makePagedSelect($folderInput, null, function(data) {
+  makePagedSelect($folderInput, $searchForm, function(data) {
     // Format data
     const newData = [];
 
@@ -2687,7 +2687,7 @@ Toolbar.prototype.layoutTemplatesContentPopulate = function(menu) {
     return {
       data: newData,
     };
-  });
+  }, true);
 
   // Initialize other select inputs
   $container
@@ -2916,11 +2916,11 @@ Toolbar.prototype.playlistsContentPopulate = function(menu) {
   // Initialize user list input
   const $userListInput = $container
     .find('.media-search-form select[name="userId"]');
-  makePagedSelect($userListInput);
+  makePagedSelect($userListInput, $container, null, true);
 
   // Initialize folder input
   const $folderInput = $container.find('select[name="folderId"]');
-  makePagedSelect($folderInput, null, function(data) {
+  makePagedSelect($folderInput, $container, function(data) {
     // Format data
     const newData = [];
 
@@ -2946,7 +2946,7 @@ Toolbar.prototype.playlistsContentPopulate = function(menu) {
     return {
       data: newData,
     };
-  });
+  }, true);
 
   // Initialize other select inputs
   $container