diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 328e3879b5..3e69a18f8a 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -56,11 +56,11 @@ class TemplatesList extends Component {
 
   componentDidMount() {
     this.loadTemplates();
-    document.addEventListener('click', this.handleAddToggle, false);
   }
 
   componentDidUpdate(prevProps) {
     const { location } = this.props;
+
     if (location !== prevProps.location) {
       this.loadTemplates();
     }
@@ -91,12 +91,19 @@ class TemplatesList extends Component {
 
   handleAddToggle(e) {
     const { isAddOpen } = this.state;
+    document.addEventListener('click', this.handleAddToggle, false);
+
     if (this.node && this.node.contains(e.target) && isAddOpen) {
+
+      document.removeEventListener('click', this.handleAddToggle, false);
       this.setState({ isAddOpen: false });
+
     } else if (this.node && this.node.contains(e.target) && !isAddOpen) {
       this.setState({ isAddOpen: true });
+
     } else {
       this.setState({ isAddOpen: false });
+      document.removeEventListener('click', this.handleAddToggle, false);
     }
   }
 
@@ -236,10 +243,9 @@ class TemplatesList extends Component {
                         isPlain
                         isOpen={isAddOpen}
                         position={DropdownPosition.right}
-                        onSelect={this.handleAddSelect}
-                        toggle={<ToolbarAddButton onClick={() => {}} />}
+                        toggle={<ToolbarAddButton onClick={this.handleAddToggle}/>}
                         dropdownItems={[
-                          <DropdownItem isHovered={false} key="job">
+                          <DropdownItem key="job">
                             <Link to={`${match.url}/job_template/add/`}>
                               {i18n._(t`Job Template`)}
                             </Link>
@@ -268,13 +274,17 @@ class TemplatesList extends Component {
             )}
             emptyStateControls={
               canAdd && (
-                <Dropdown
+                <div
+                  ref={node => {
+                    this.node = node;
+                  }}
                   key="add"
+                >
+                <Dropdown
                   isPlain
                   isOpen={isAddOpen}
                   position={DropdownPosition.right}
-                  onSelect={this.handleAddSelect}
-                  toggle={<ToolbarAddButton onClick={this.handleAddToggle} />}
+                  toggle={<ToolbarAddButton onClick={this.handleAddToggle}/> }
                   dropdownItems={[
                     <DropdownItem key="job">
                       <Link to={`${match.url}/job_template/add/`}>
@@ -288,6 +298,7 @@ class TemplatesList extends Component {
                     </DropdownItem>,
                   ]}
                 />
+              </div>
               )
             }
           />