diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/tree-item-base/tree-item-base.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/tree-item-base/tree-item-base.element.ts
index fc7017304c..94f3c3bb82 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/tree-item-base/tree-item-base.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/tree-item-base/tree-item-base.element.ts
@@ -55,12 +55,6 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 		});
 	}
 
-	connectedCallback(): void {
-		super.connectedCallback();
-		this.addEventListener('selected', this._handleSelectedItem);
-		this.addEventListener('unselected', this._handleDeselectedItem);
-	}
-
 	private _handleSelectedItem(event: Event) {
 		event.stopPropagation();
 		this.#treeItemContext?.select();
@@ -92,10 +86,13 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 		this.#treeItemContext?.toggleContextMenu();
 	}
 
+	// TODO: We should rename unselect event to deselect. But this is a breaking change of UI Library.
 	render() {
 		return html`
 			<uui-menu-item
 				@show-children=${this._onShowChildren}
+				@selected=${this._handleSelectedItem}
+				@unselected=${this._handleDeselectedItem}
 				?selectable=${this._isSelectable}
 				?selected=${this._isSelected}
 				.loading=${this._isLoading}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts
index 990e021039..554daf8f65 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type-picker/input-document-type-picker.element.ts
@@ -11,7 +11,7 @@ import {
 	UmbModalContext,
 	UMB_MODAL_CONTEXT_TOKEN,
 	UMB_CONFIRM_MODAL,
-	UMB_DOCUMENT_PICKER_MODAL,
+	UMB_DOCUMENT_TYPE_PICKER_MODAL,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DocumentTypeResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -73,7 +73,7 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl
 
 	private _openPicker() {
 		// We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data:
-		const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, {
+		const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
 			multiple: true,
 			selection: [...this._selectedIds],
 		});