diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
index 82a847c010..7f3f28b048 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
@@ -36,7 +36,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
 	}
 
 	private _workspaceContext: UmbWorkspaceDocumentContext = new UmbWorkspaceDocumentContext(this);
-	
+
 	render() {
 		return html`<umb-workspace-content alias="Umb.Workspace.Document"></umb-workspace-content>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index 0001d19931..547ba89ca4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -20,21 +20,21 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 		`,
 	];
 
-	private _pickedKeysArray: Array<string> = [];
-	private get _pickedKeys(): Array<string> {
-		return this._pickedKeysArray;
+	private _selectedKeys: Array<string> = [];
+	public get selectedKeys(): Array<string> {
+		return this._selectedKeys;
 	}
-	private set _pickedKeys(keys: Array<string>) {
-		this._pickedKeysArray = keys;
-		this._value = keys.join(',');
+	public set selectedKeys(keys: Array<string>) {
+		console.log("selectedKeys", keys);
+		this._selectedKeys = keys;
+		super.value = keys.join(',');
 		this._observePickedDocuments();
 	}
 
-	@property({ type: String })
+	@property()
 	public set value(keysString: string) {
 		if(keysString !== this._value) {
-			super.value = keysString;
-			this._pickedKeys = keysString.split(/[ ,]+/);
+			this.selectedKeys = keysString.split(/[ ,]+/);
 		}
 	}
 
@@ -71,16 +71,16 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 		if (!this._documentStore) return;
 
 		// TODO: consider changing this to the list data endpoint when it is available
-		this._pickedItemsObserver = this.observe(this._documentStore.getTreeItems(this._pickedKeysArray), (items) => {
+		this._pickedItemsObserver = this.observe(this._documentStore.getTreeItems(this._selectedKeys), (items) => {
 			this._items = items;
 		});
 	}
 
 	private _openPicker() {
-		// We send a shallow copy(good enough as its just an array of keys) of our this._pickedKeysArray, as we don't want the modal to manipulate our data:
-		const modalHandler = this._modalService?.contentPicker({ multiple: true, selection: [...this._pickedKeysArray] });
+		// We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data:
+		const modalHandler = this._modalService?.contentPicker({ multiple: true, selection: [...this._selectedKeys] });
 		modalHandler?.onClose().then(({ selection }: any) => {
-			this._setValue(selection);
+			this._setSelection(selection);
 		});
 	}
 
@@ -94,14 +94,14 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 
 		modalHandler?.onClose().then(({ confirmed }) => {
 			if (confirmed) {
-				const newValue = this._pickedKeys.filter((value) => value !== item.key);
-				this._setValue(newValue);
+				const newSelection = this._selectedKeys.filter((value) => value !== item.key);
+				this._setSelection(newSelection);
 			}
 		});
 	}
 
-	private _setValue(newValue: Array<string>) {
-		this._pickedKeys = newValue;
+	private _setSelection(newSelection: Array<string>) {
+		this.selectedKeys = newSelection;
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
index 478725c29f..c1f0c82bcc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { ChangeEvent } from 'react';
 import { UmbLitElement } from '@umbraco-cms/element';
 // eslint-disable-next-line import/no-named-as-default
@@ -18,23 +18,30 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
 	];
 	*/
 
+	private _value: Array<string> = [];
 
 	@property({ type: Array })
-	private value: Array<string> = [];
+	public get value(): Array<string> {
+		return this._value;
+	}
+	public set value(value: Array<string>) {
+		console.log("property editor got value", value)
+			this._value = value || [];
+	}
 
 	// TODO: Use config for something.
 	@property({ type: Array, attribute: false })
 	public config = [];
 
 	private _onChange(event: ChangeEvent) {
-		this.value = (event.target as UmbInputDocumentPickerElement).value;
+		this.value = (event.target as UmbInputDocumentPickerElement).selectedKeys;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 
 	render() {
 		return html`
-			<umb-input-document-picker @change=${this._onChange} .value=${this.value}>Add</umb-input-document-picker>
+			<umb-input-document-picker @change=${this._onChange} .selectedKeys=${this._value}>Add</umb-input-document-picker>
 		`;
 	}