From b16f068a4d87ffe37ca9f98c92989661784c1a36 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 23 Mar 2018 15:14:18 -0700
Subject: [PATCH 1/6] Prevent props change from affecting local state

---
 ui/src/shared/components/MultiSelectDropdown.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index c54a404e5..987d6d4e5 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/ui/src/shared/components/MultiSelectDropdown.js
@@ -39,14 +39,6 @@ class MultiSelectDropdown extends Component {
     this.setState({isOpen: false})
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!_.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
-      return
-    }
-
-    this.setState({localSelectedItems: nextProps.selectedItems})
-  }
-
   toggleMenu = e => {
     e.stopPropagation()
     this.setState({isOpen: !this.state.isOpen})

From 29fefc46723e7e41bc09e86484c35e9170063247 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 23 Mar 2018 15:14:27 -0700
Subject: [PATCH 2/6] Simplify logic

---
 ui/src/shared/components/MultiSelectDropdown.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index 987d6d4e5..81c7b96cc 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/ui/src/shared/components/MultiSelectDropdown.js
@@ -98,17 +98,16 @@ class MultiSelectDropdown extends Component {
 
   renderMenu() {
     const {items, isApplyShown} = this.props
-    const applyButton = isApplyShown ? (
-      <li className="multi-select--apply">
-        <button className="btn btn-xs btn-info" onClick={this.handleApply}>
-          Apply
-        </button>
-      </li>
-    ) : null
 
     return (
       <ul className="dropdown-menu">
-        {applyButton}
+        {isApplyShown && (
+          <li className="multi-select--apply">
+            <button className="btn btn-xs btn-info" onClick={this.handleApply}>
+              Apply
+            </button>
+          </li>
+        )}
         <FancyScrollbar
           autoHide={false}
           autoHeight={true}

From eca94bb7526c3e12293749ee5aafaa68bccf185e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 23 Mar 2018 15:22:51 -0700
Subject: [PATCH 3/6] Update change log

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16e11a96d..35de1fa89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@
 
 ### UI Improvements
 
-1. [#2910](https://github.com/influxdata/chronograf/pull/2910): Redesign system notifications
+1.  [#2910](https://github.com/influxdata/chronograf/pull/2910): Redesign system notifications
 
 ### Bug Fixes
 
@@ -17,6 +17,7 @@
 1.  [#2919](https://github.com/influxdata/chronograf/pull/2919): Automatically add graph type 'line' to any graph missing a type
 1.  [#2970](https://github.com/influxdata/chronograf/pull/2970): Fix hanging browser on docker host dashboard
 1.  [#3006](https://github.com/influxdata/chronograf/pull/3006): Fix Kapacitor Rules task enabled checkboxes to only toggle exactly as clicked
+1.  [#3048](https://github.com/influxdata/chronograf/pull/3048): Fix Multi-Select Dropdown bug
 
 ## v1.4.2.3 [2018-03-08]
 

From b999aa87b7270f0e5d85692c7f13a089a52a6d25 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 23 Mar 2018 18:02:57 -0700
Subject: [PATCH 4/6] Revert "Prevent props change from affecting local state"

This reverts commit b16f068a4d87ffe37ca9f98c92989661784c1a36.
---
 ui/src/shared/components/MultiSelectDropdown.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index 81c7b96cc..1b9108ae4 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/ui/src/shared/components/MultiSelectDropdown.js
@@ -39,6 +39,14 @@ class MultiSelectDropdown extends Component {
     this.setState({isOpen: false})
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!_.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
+      return
+    }
+
+    this.setState({localSelectedItems: nextProps.selectedItems})
+  }
+
   toggleMenu = e => {
     e.stopPropagation()
     this.setState({isOpen: !this.state.isOpen})

From f84a632f548d7eed89e32e55cd473d0018794334 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 23 Mar 2018 18:10:49 -0700
Subject: [PATCH 5/6] Prevent InfluxDB Admin reset state of MultiSelectDropdown
 on props refresh

---
 ui/src/admin/components/RoleRow.js              | 2 ++
 ui/src/admin/components/UserRow.js              | 2 ++
 ui/src/shared/components/MultiSelectDropdown.js | 7 ++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/admin/components/RoleRow.js b/ui/src/admin/components/RoleRow.js
index 94afb37db..c5abf73ea 100644
--- a/ui/src/admin/components/RoleRow.js
+++ b/ui/src/admin/components/RoleRow.js
@@ -77,6 +77,7 @@ const RoleRow = ({
             customClass={classnames(`dropdown-${ROLES_TABLE.colPermissions}`, {
               'admin-table--multi-select-empty': !permissions.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         ) : null}
       </td>
@@ -92,6 +93,7 @@ const RoleRow = ({
             customClass={classnames(`dropdown-${ROLES_TABLE.colUsers}`, {
               'admin-table--multi-select-empty': !users.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         ) : null}
       </td>
diff --git a/ui/src/admin/components/UserRow.js b/ui/src/admin/components/UserRow.js
index d35b69280..88cf2254d 100644
--- a/ui/src/admin/components/UserRow.js
+++ b/ui/src/admin/components/UserRow.js
@@ -96,6 +96,7 @@ const UserRow = ({
             customClass={classnames(`dropdown-${USERS_TABLE.colRoles}`, {
               'admin-table--multi-select-empty': !roles.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         </td>
       ) : null}
@@ -113,6 +114,7 @@ const UserRow = ({
             customClass={classnames(`dropdown-${USERS_TABLE.colPermissions}`, {
               'admin-table--multi-select-empty': !permissions.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         ) : null}
       </td>
diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index 1b9108ae4..77b954329 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/ui/src/shared/components/MultiSelectDropdown.js
@@ -40,7 +40,10 @@ class MultiSelectDropdown extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!_.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
+    if (
+      !this.props.resetStateOnReceiveProps ||
+      !_.isEqual(this.props.selectedItems, nextProps.selectedItems)
+    ) {
       return
     }
 
@@ -161,6 +164,7 @@ MultiSelectDropdown.propTypes = {
   customClass: string,
   iconName: string,
   isApplyShown: bool,
+  resetStateOnReceiveProps: bool,
 }
 
 MultiSelectDropdown.defaultProps = {
@@ -169,6 +173,7 @@ MultiSelectDropdown.defaultProps = {
   customClass: 'dropdown-160',
   selectedItems: [],
   isApplyShown: true,
+  resetStateOnReceiveProps: true,
 }
 
 export default OnClickOutside(MultiSelectDropdown)

From 4a9899a0d54ab48ab03d95352fa6a31d81c1821e Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 23 Mar 2018 18:14:03 -0700
Subject: [PATCH 6/6] Expound upon changelog update

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35de1fa89..8dd3ef482 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,7 @@
 1.  [#2919](https://github.com/influxdata/chronograf/pull/2919): Automatically add graph type 'line' to any graph missing a type
 1.  [#2970](https://github.com/influxdata/chronograf/pull/2970): Fix hanging browser on docker host dashboard
 1.  [#3006](https://github.com/influxdata/chronograf/pull/3006): Fix Kapacitor Rules task enabled checkboxes to only toggle exactly as clicked
-1.  [#3048](https://github.com/influxdata/chronograf/pull/3048): Fix Multi-Select Dropdown bug
+1.  [#3048](https://github.com/influxdata/chronograf/pull/3048): Prevent Multi-Select Dropdown in InfluxDB Admin Users and Roles tabs from losing selection state
 
 ## v1.4.2.3 [2018-03-08]