ui: Fix behavior of multiselect in list view (apache#3161)

pbankonier · yadvr · commit 2e2b6700a5a1 · 2019-03-26T13:11:41.000+05:30
Hide multiselectaction buttons when selection is resetted after a action is performed
Use checked prop instead of attr to show/hide triggered selection when box was clicked by a user before.

How to reproduce:

Select one entry in a multiSelect listView (e.g. instance list) and then deselect it again. Now click on the "select all" checkbox. The entries which were clicked previously are not displayed as selected.

Select at least one entry. Use the multiSelectAction buttons to trigger an action. Wait for completion. The list refreshes and no entry is selected but the multiSelectAction buttons are displayed.

Fix:

Use "checked" property instead of the attribute to select all entries. This is necessary because when you checked an entry by clicking on it the property gets set and the browser is preferably using this. So setting the attribute by clicking on the "select all" checkbox had no impact anymore on the checkBox of the previously clicked entries.

Hide the multiSelectAction buttons when the list is refreshed after an action is performed and no element is selected anymore.
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
@@ -88,7 +88,9 @@
 
                 // Make sure the master checkbox is unselected
                 if (multiSelect) {
-                    $instanceRow.closest('.list-view').find('input.multiSelectMasterCheckbox').attr('checked', false);
+                    var $listView = $instanceRow.closest('.list-view');
+                    $listView.find('input.multiSelectMasterCheckbox').prop('checked', false);
+                    toggleMultiSelectActions($listView, false);
                 }
 
                 var externalLinkAction = action.externalLink;
@@ -882,15 +884,15 @@
 
         if (multiSelect) {
             var $th = $('<th>').addClass('multiselect').appendTo($tr);
-            var content = $('<input>')
+            var $multiSelectMaster = $('<input>')
                 .attr('type', 'checkbox')
-                .addClass('multiSelectMasterCheckbox')
-                .appendTo($th);
+                .addClass('multiSelectMasterCheckbox');
+            $multiSelectMaster.appendTo($th);
 
-            content.click(function() {
-                var checked = $(this).is(':checked');
-                $('.multiSelectCheckbox').attr('checked', checked);
-                toggleMultiSelectActions($table.closest('.list-view'), checked);
+            $multiSelectMaster.click(function() {
+                var isMasterChecked = $(this).prop('checked');
+                $('.multiSelectCheckbox').prop('checked', isMasterChecked);
+                toggleMultiSelectActions($table.closest('.list-view'), isMasterChecked);
             });
         }
 
