fix(DualList): de-Select items after the transition between lists. (p…

…atternfly#1178)

packages/patternfly-3/patternfly-react/src/components/DualListSelector/DualList.js

@@ -186,22 +186,31 @@ class DualList extends React.Component {
     if (sideItemsWithRemainChildren.length > 0) {
       sideItems.push(...sideItemsWithRemainChildren);
     }
-    sideItems = arrangeArray({ ...sideState, items: sideItems });
-    otherSideItems = arrangeArray({ ...otherSideState, items: otherSideItems });
-
     const updatedSideState = {
       ...sideState,
-      items: sideItems,
-      selectCount: 0
+      selectCount: 0,
+      isMainChecked: false
     };
 
     const updatedOtherSideState = {
       ...otherSideState,
-      items: otherSideItems,
-      selectCount: sideState.selectCount + otherSideState.selectCount
+      selectCount: 0,
+      isMainChecked: false
     };
 
-    this.props.onChange({ [side]: updatedSideState, [otherSide]: updatedOtherSideState });
+    sideItems = arrangeArray({ ...updatedSideState, items: sideItems });
+    otherSideItems = arrangeArray({ ...updatedOtherSideState, items: otherSideItems, resetAllSelected: true });
+
+    this.props.onChange({
+      [side]: {
+        ...updatedSideState,
+        items: sideItems
+      },
+      [otherSide]: {
+        ...updatedOtherSideState,
+        items: otherSideItems
+      }
+    });
   };
 
   leftArrowClick = () => {

packages/patternfly-3/patternfly-react/src/components/DualListSelector/DualList.test.js

@@ -99,8 +99,8 @@ test('move child items works properly', () => {
     .find('Icon')
     .first();
   rightArrow.simulate('click');
-  expect(component.state().right.items[0].checked).toBeTruthy();
-  expect(component.state().right.items[0].children[0].checked).toBeTruthy();
+  expect(component.state().right.items[0].checked).toBeFalsy();
+  expect(component.state().right.items[0].children[0].checked).toBeFalsy();
 });
 
 test('dual-list filter works ', () => {
@@ -147,7 +147,6 @@ test('transitions between selectors works!', () => {
     .first();
   const arrows = component.find('DualListArrows').find('Icon');
   const rightArrow = arrows.at(0);
-  const leftArrow = arrows.at(1);
   const { 'data-side': side, 'data-position': position } = firstItemCheckbox.props();
   const mockedEvent = { target: { checked: true, dataset: { position, side } } };
   const getState = () => component.state();
@@ -157,9 +156,6 @@ test('transitions between selectors works!', () => {
   rightArrow.simulate('click');
   expect(getState().left.items).toHaveLength(1);
   expect(getState().right.items).toHaveLength(2);
-  leftArrow.simulate('click');
-  expect(getState().left.items).toHaveLength(2);
-  expect(getState().right.items).toHaveLength(1);
 });
 
 test('sorting works ! ', () => {

packages/patternfly-3/patternfly-react/src/components/DualListSelector/helpers.js

@@ -38,22 +38,36 @@ export const makeAllItemsVisible = list =>
 export const sortItems = (items, sortFactor = 'label') =>
   items.sort((a, b) => (a[sortFactor].toLowerCase() > b[sortFactor].toLowerCase() ? 1 : -1));
 
-export const arrangeArray = ({ items, sortBy, isSortAsc = true, isMainChecked = false }) => {
+export const shouldItemBeChecked = (item, isMainChecked, resetAllSelected) => {
+  let checked = item.checked || false;
+  const isItemEditable = !item.disabled || !item.hidden;
+  if (!isItemEditable) {
+    return checked;
+  }
+  if (resetAllSelected) {
+    checked = false;
+  } else if (isMainChecked) {
+    checked = isMainChecked;
+  }
+  return checked;
+};
+
+export const arrangeArray = ({ items, sortBy, isSortAsc = true, isMainChecked = false, resetAllSelected = false }) => {
   // sort the items
   let itemsCopy = sortItems(items, sortBy).map((item, index) => {
     // add position to the item and update if the main checkbox is initialy checked.
     const modifiedItem = {
       ...item,
       position: index,
-      checked: item.checked || isMainChecked
+      checked: shouldItemBeChecked(item, isMainChecked, resetAllSelected)
     };
     if (itemHasChildren(item)) {
       // sort the children array and add a position, parentPosition and update check state.
       modifiedItem.children = sortItems(item.children, sortBy).map((child, childIndex) => ({
         ...child,
         position: childIndex,
         parentPosition: index,
-        checked: child.checked || isMainChecked
+        checked: shouldItemBeChecked(child, isMainChecked, resetAllSelected)
       }));
     }
     return modifiedItem;