From 6d88ad96cb5bedfd48c2e0f0c3664287bb3e6c38 Mon Sep 17 00:00:00 2001
From: Thomas Tracy <contact@tjtracy.com>
Date: Mon, 5 Oct 2020 10:05:41 -0400
Subject: [PATCH] Ttracy/mb 618 modal fast follow (#25217)

* Fix ref on multiselect button to prevent if from staying open
---
 .../MultiselectDropdown.jsx                      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/lms/static/js/demographics_collection/MultiselectDropdown.jsx b/lms/static/js/demographics_collection/MultiselectDropdown.jsx
index 62cbbacba1..42aa6a1dd0 100644
--- a/lms/static/js/demographics_collection/MultiselectDropdown.jsx
+++ b/lms/static/js/demographics_collection/MultiselectDropdown.jsx
@@ -134,20 +134,18 @@ class MultiselectDropdown extends React.Component {
           // essentially what this if statement is saying:
           // if the newly focused target is NOT a child of the this element, THEN fire the onBlur function
           // and close the dropdown.
-          if(!e.currentTarget.contains(e.relatedTarget)) {
+          if (!e.currentTarget.contains(e.relatedTarget)) {
             this.props.onBlur(e);
-            this.setState({open: false})
+            this.setState({ open: false })
           }
         }}
       >
         <label id="multiselect-dropdown-label" htmlFor="multiselect-dropdown">{this.props.label}</label>
-        <div 
-          className="form-control d-flex" 
-        >
-        <button className="multiselect-dropdown-button" disabled={this.props.disabled} id="multiselect-dropdown-button" ref={this.buttonRef} aria-haspopup="true" aria-expanded={this.state.open} aria-labelledby="multiselect-dropdown-label multiselect-dropdown-button" onClick={this.handleButtonClick}>
-          {this.renderSelected()}
-        </button>
-        {this.renderUnselect()}
+        <div className="form-control d-flex">
+          <button className="multiselect-dropdown-button" disabled={this.props.disabled} id="multiselect-dropdown-button" ref={this.setButtonRef} aria-haspopup="true" aria-expanded={this.state.open} aria-labelledby="multiselect-dropdown-label multiselect-dropdown-button" onClick={this.handleButtonClick}>
+            {this.renderSelected()}
+          </button>
+          {this.renderUnselect()}
         </div>
         <div>
           {this.renderMenu()}