diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 8f8d0ecea6..0e56ee6078 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -109,7 +109,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 8beb597edb..7caed7c802 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@@ -12,6 +12,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 },
@@ -22,10 +26,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
         isAllSelected={false}
@@ -73,8 +73,6 @@ describe('<DataListToolbar />', () => {
       { name: 'Baz', key: 'baz' },
     ];
 
-    const onSort = jest.fn();
-
     toolbar = mountWithContexts(
       <DataListToolbar
         sortedColumnKey="foo"
@@ -198,9 +196,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
@@ -220,4 +215,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 34e29329a2..e1dfa6508e 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -56,6 +56,7 @@ class TemplatesList extends Component {
 
   componentDidMount() {
     this.loadTemplates();
+    document.addEventListener('click', this.handleAddToggle, false);
   }
 
   componentDidUpdate(prevProps) {
@@ -65,6 +66,10 @@ class TemplatesList extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleAddToggle, false);
+  }
+
   handleDeleteErrorClose() {
     this.setState({ deletionError: null });
   }
@@ -84,9 +89,15 @@ class TemplatesList extends Component {
     }
   }
 
-  handleAddToggle() {
+  handleAddToggle(e) {
     const { isAddOpen } = this.state;
-    this.setState({ isAddOpen: !isAddOpen });
+    if (this.node && this.node.contains(e.target) && isAddOpen) {
+      this.setState({ isAddOpen: false });
+    } else if (this.node && this.node.contains(e.target) && !isAddOpen) {
+      this.setState({ isAddOpen: true });
+    } else {
+      this.setState({ isAddOpen: false });
+    }
   }
 
   async handleTemplateDelete() {
@@ -215,28 +226,32 @@ class TemplatesList extends Component {
                     itemName={i18n._(t`Template`)}
                   />,
                   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}
+                        onSelect={this.handleAddSelect}
+                        toggle={<ToolbarAddButton onClick={() => {}} />}
+                        dropdownItems={[
+                          <DropdownItem key="job" isPlain>
+                            <Link to={`${match.url}/job_template/add/`}>
+                              {i18n._(t`Job Template`)}
+                            </Link>
+                          </DropdownItem>,
+                          <DropdownItem key="workflow" isPlain>
+                            <Link to={`${match.url}_workflow/add/`}>
+                              {i18n._(t`Workflow Template`)}
+                            </Link>
+                          </DropdownItem>,
+                        ]}
+                      />
+                    </div>
                   ),
                 ]}
               />