diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index b91cdf977e..305a0f0ae2 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -112,7 +112,7 @@ class DataListToolbar extends React.Component {
               <Fragment>
                 <ToolbarItem>
                   <Checkbox
-                    checked={isAllSelected}
+                    isChecked={isAllSelected}
                     onChange={onSelectAll}
                     aria-label={i18n._(t`Select all`)}
                     id="select-all"
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
index 22ad8e2dac..1b4fe4588a 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@@ -19,6 +19,10 @@ describe('<DataListToolbar />', () => {
     }
   });
 
+  const onSearch = jest.fn();
+  const onSort = jest.fn();
+  const onSelectAll = jest.fn();
+
   test('it triggers the expected callbacks', () => {
     const columns = [
       { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
@@ -29,10 +33,6 @@ describe('<DataListToolbar />', () => {
     const selectAll = 'input[aria-label="Select all"]';
     const sort = 'button[aria-label="Sort"]';
 
-    const onSearch = jest.fn();
-    const onSort = jest.fn();
-    const onSelectAll = jest.fn();
-
     toolbar = mountWithContexts(
       <DataListToolbar
         qsConfig={QS_CONFIG}
@@ -81,8 +81,6 @@ describe('<DataListToolbar />', () => {
       { name: 'Baz', key: 'baz' },
     ];
 
-    const onSort = jest.fn();
-
     toolbar = mountWithContexts(
       <DataListToolbar
         qsConfig={QS_CONFIG}
@@ -210,9 +208,6 @@ describe('<DataListToolbar />', () => {
     const columns = [
       { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
     ];
-    const onSearch = jest.fn();
-    const onSort = jest.fn();
-    const onSelectAll = jest.fn();
 
     toolbar = mountWithContexts(
       <DataListToolbar
@@ -233,4 +228,26 @@ describe('<DataListToolbar />', () => {
     expect(button).toHaveLength(1);
     expect(button.text()).toEqual('click');
   });
+
+  test('it triggers the expected callbacks', () => {
+    const columns = [
+      { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
+    ];
+
+    toolbar = mountWithContexts(
+      <DataListToolbar
+        isAllSelected
+        showExpandCollapse
+        sortedColumnKey="name"
+        sortOrder="ascending"
+        columns={columns}
+        onSearch={onSearch}
+        onSort={onSort}
+        onSelectAll={onSelectAll}
+        showSelectAll
+      />
+    );
+    const checkbox = toolbar.find('Checkbox');
+    expect(checkbox.prop('isChecked')).toBe(true);
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index e0f12f8bcb..432e8f105f 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -60,11 +60,16 @@ class TemplatesList extends Component {
 
   componentDidUpdate(prevProps) {
     const { location } = this.props;
+
     if (location !== prevProps.location) {
       this.loadTemplates();
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleAddToggle, false);
+  }
+
   handleDeleteErrorClose() {
     this.setState({ deletionError: null });
   }
@@ -84,9 +89,19 @@ class TemplatesList extends Component {
     }
   }
 
-  handleAddToggle() {
+  handleAddToggle(e) {
     const { isAddOpen } = this.state;
-    this.setState({ isAddOpen: !isAddOpen });
+    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);
+    }
   }
 
   async handleTemplateDelete() {
@@ -216,28 +231,33 @@ class TemplatesList extends Component {
                     pluralizedItemName="Templates"
                   />,
                   canAdd && (
-                    <Dropdown
+                    <div
+                      ref={node => {
+                        this.node = node;
+                      }}
                       key="add"
-                      isPlain
-                      isOpen={isAddOpen}
-                      position={DropdownPosition.right}
-                      onSelect={this.handleAddSelect}
-                      toggle={
-                        <ToolbarAddButton onClick={this.handleAddToggle} />
-                      }
-                      dropdownItems={[
-                        <DropdownItem key="job">
-                          <Link to={`${match.url}/job_template/add/`}>
-                            {i18n._(t`Job Template`)}
-                          </Link>
-                        </DropdownItem>,
-                        <DropdownItem key="workflow">
-                          <Link to={`${match.url}_workflow/add/`}>
-                            {i18n._(t`Workflow Template`)}
-                          </Link>
-                        </DropdownItem>,
-                      ]}
-                    />
+                    >
+                      <Dropdown
+                        isPlain
+                        isOpen={isAddOpen}
+                        position={DropdownPosition.right}
+                        toggle={
+                          <ToolbarAddButton onClick={this.handleAddToggle} />
+                        }
+                        dropdownItems={[
+                          <DropdownItem key="job">
+                            <Link to={`${match.url}/job_template/add/`}>
+                              {i18n._(t`Job Template`)}
+                            </Link>
+                          </DropdownItem>,
+                          <DropdownItem key="workflow">
+                            <Link to={`${match.url}_workflow/add/`}>
+                              {i18n._(t`Workflow Template`)}
+                            </Link>
+                          </DropdownItem>,
+                        ]}
+                      />
+                    </div>
                   ),
                 ]}
               />
@@ -254,26 +274,31 @@ class TemplatesList extends Component {
             )}
             emptyStateControls={
               canAdd && (
-                <Dropdown
+                <div
+                  ref={node => {
+                    this.node = node;
+                  }}
                   key="add"
-                  isPlain
-                  isOpen={isAddOpen}
-                  position={DropdownPosition.right}
-                  onSelect={this.handleAddSelect}
-                  toggle={<ToolbarAddButton onClick={this.handleAddToggle} />}
-                  dropdownItems={[
-                    <DropdownItem key="job">
-                      <Link to={`${match.url}/job_template/add/`}>
-                        {i18n._(t`Job Template`)}
-                      </Link>
-                    </DropdownItem>,
-                    <DropdownItem key="workflow">
-                      <Link to={`${match.url}_workflow/add/`}>
-                        {i18n._(t`Workflow Template`)}
-                      </Link>
-                    </DropdownItem>,
-                  ]}
-                />
+                >
+                  <Dropdown
+                    isPlain
+                    isOpen={isAddOpen}
+                    position={DropdownPosition.right}
+                    toggle={<ToolbarAddButton onClick={this.handleAddToggle} />}
+                    dropdownItems={[
+                      <DropdownItem key="job">
+                        <Link to={`${match.url}/job_template/add/`}>
+                          {i18n._(t`Job Template`)}
+                        </Link>
+                      </DropdownItem>,
+                      <DropdownItem key="workflow">
+                        <Link to={`${match.url}_workflow/add/`}>
+                          {i18n._(t`Workflow Template`)}
+                        </Link>
+                      </DropdownItem>,
+                    ]}
+                  />
+                </div>
               )
             }
           />