diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypegroup.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypegroup.component.js
index 5b9c9ab0a1..82112012c0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypegroup.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypegroup.component.js
@@ -4,7 +4,7 @@
   /**
    * A component to render the content type group
    */
-  
+
   function umbContentTypeGroupController() {
 
     const vm = this;
@@ -14,6 +14,7 @@
     vm.whenNameFocus = whenNameFocus;
     vm.whenFocus = whenFocus;
     vm.changeSortOrderValue = changeSortOrderValue;
+    vm.clickComposition = clickComposition;
 
     function updateName (group) {
       if (vm.onUpdateName) {
@@ -44,6 +45,11 @@
         vm.onChangeSortOrderValue( {group: vm.group});
       }
     }
+    function clickComposition (documentTypeId) {
+      if (vm.onClickComposition) {
+        vm.onClickComposition({documentTypeId: documentTypeId});
+      }
+    }
   }
 
   const umbContentTypeGroupComponent = {
@@ -61,7 +67,8 @@
       onFocus: '&',
       onChangeSortOrderValue: '&',
       valServerFieldName: '@',
-      valTabAlias: "@"
+      valTabAlias: "@",
+      onClickComposition: '&?'
     },
     controller: umbContentTypeGroupController
   };
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
index 09a7e603da..2b129c6b9d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
@@ -15,6 +15,7 @@
     vm.whenFocus = whenFocus;
     vm.changeSortOrderValue = changeSortOrderValue;
     vm.changeName = changeName;
+    vm.clickComposition = clickComposition;
 
     function click () {
       if (vm.onClick) {
@@ -51,6 +52,11 @@
         vm.onChangeName({ key: vm.tab.key, name: vm.tab.name });
       }
     }
+    function clickComposition (documentTypeId) {
+      if (vm.onClickComposition) {
+        vm.onClickComposition({documentTypeId: documentTypeId});
+      }
+    }
 
   }
 
@@ -61,6 +67,7 @@
     bindings: {
       tab: '<',
       onClick: '&?',
+      onClickComposition: '&?',
       isOpen: '<?',
       allowRemove: '<?',
       onRemove: '&?',
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index 7583fc62e6..adbafe9851 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -424,7 +424,7 @@
 
             };
 
-            scope.openDocumentType = documentTypeId => {
+            scope.openDocumentType = (documentTypeId) => {
                 const editor = {
                     id: documentTypeId,
                     submit: () => {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
index 89c4006dc3..ca80a4d103 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-group.html
@@ -31,7 +31,7 @@
             <i class="icon icon-merge"></i>
             <localize key="contentTypeEditor_inheritedFrom"></localize>: {{ vm.group.inheritedFromName }}
             <span ng-repeat="contentTypeName in vm.group.parentTabContentTypeNames">
-                <button type="button" class="btn-link btn-small p0" ng-click="openDocumentType(vm.group.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
+                <button type="button" class="btn-link btn-small p0" ng-click="vm.clickComposition(vm.group.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
                 <span ng-if="!$last">, </span>
             </span>
         </div>
@@ -56,4 +56,4 @@
     <div class="umb-group-builder__group-content">
         <ng-transclude></ng-transclude>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
index 9f90f6e007..b26f5209aa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html
@@ -3,7 +3,7 @@
       <div class="umb-group-builder__tab-inherited-label" ng-if="vm.tab.inherited">
           <localize key="contentTypeEditor_inheritedFrom"></localize>: {{ vm.tab.inheritedFromName }}
           <span ng-repeat="contentTypeName in vm.tab.parentTabContentTypeNames">
-              <button type="button" class="btn-link btn-small p0" ng-click="openDocumentType(vm.tab.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
+              <button type="button" class="btn-link btn-small p0" ng-click="vm.clickComposition(vm.tab.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
               <span ng-if="!$last">, </span>
           </span>
       </div>
@@ -28,7 +28,7 @@
                     val-server-field="{{ vm.valServerFieldName }}"
                     data-lpignore="true"
                     required />
-                
+
                 <div class="umb-group-builder__tab-val-message" ng-messages="tabNameForm.tabName.$error" show-validation-on-submit>
                     <div class="umb-validation-label -arrow-bottom" ng-message="valServerField">{{tabNameForm.tabName.errorMsg}}</div>
                     <div class="umb-validation-label -arrow-bottom" ng-message="required"><localize key="required"></localize></div>
@@ -52,7 +52,7 @@
   </div>
   <div class="umb-group-builder__tab-remove" ng-if="vm.allowRemove">
       <button type="button" class="btn-reset" ng-click="vm.removeTab()">
-          <i class="icon-trash"></i>
+          <i cass="icon-trash"></i>
       </button>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index 06c400e889..d2128d60fb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -22,6 +22,7 @@
                             tab="tab"
                             is-open="tab.alias === openTabAlias"
                             on-click="changeTab(tab)"
+                            on-click-composition="openDocumentType(documentTypeId)"
                             sorting="sortingMode"
                             allow-remove="canRemoveTab(tab) && !sortingMode"
                             on-remove="removeTab(tab, tabIndex)"
@@ -129,6 +130,7 @@
                 allow-name="true"
                 group="group"
                 allow-remove="canRemoveGroup(group) && !sortingMode"
+                on-click-composition="openDocumentType(documentTypeId)"
                 on-remove="removeGroup(group)"
                 on-update-name="onChangeGroupName(group)"
                 sorting="sortingMode"