From 2e2b6700a5a17aed2a97577c8bcec9941c30112d Mon Sep 17 00:00:00 2001 From: Philipp Bankonier Date: Tue, 26 Mar 2019 08:41:41 +0100 Subject: [PATCH] ui: Fix behavior of multiselect in list view (#3161) 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. --- ui/scripts/ui/widgets/listView.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 99f68311d8f..4a5d2016f1a 100644 --- 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 = $('').addClass('multiselect').appendTo($tr); - var content = $('') + var $multiSelectMaster = $('') .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); }); }