Property Editor not saving data

[huwred]

I have a property editor for selecting my polls, everything appears to work except when I save the document the vale does not persist. ANy pointers would be welcome.

This is my editor

import { html, customElement, state, property } from "@umbraco-cms/backoffice/external/lit";
import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor";
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { POLL_MODAL_TOKEN } from "../modals/poll-modal.token.js";
import { umbOpenModal } from "@umbraco-cms/backoffice/modal";

type PollKeyValue = {
    key: string;
    value: string;
};
type ArrayOf<T> = T[];

@customElement("mediawiz-poll-picker")
export class PollPicker extends UmbLitElement implements UmbPropertyEditorUiElement {

    @property()
    public value: ArrayOf<PollKeyValue> = [];

    @state()
    _items: ArrayOf<PollKeyValue> = [];


    // do I need this?
    connectedCallback() {
        super.connectedCallback();
        // in connectedCallback the this.value is ready
        console.log('this is my value', this.value);
        //this._items = this.value;

    }

    #updatePropertyEditorValue() {
        this.value = this._items;
        console.log("updated value");
        console.log(this.value)
        this.dispatchEvent(new CustomEvent('change'));

    }  
    render() {
        return html`
        <uui-ref-list>
            <uui-ref-node name="${this.value == null ? "No Poll Selected" : this.value[0]?.value}">
            <uui-icon slot="icon" name="icon-bar-chart"></uui-icon>
            <uui-action-bar slot="actions"><uui-button label="delete"><uui-icon name="delete"></uui-icon></uui-button></uui-action-bar>
            </uui-ref-node>
        </uui-ref-list>

        <uui-button @click=${this._openModal} id="btn-add" look="placeholder" pristine="" label="Choose a Poll" type="button" color="default"></uui-button>
        `;
    }


    /**
     * Open Modal (Document Picker)
     * @param id
     */
    async _openModal() {
        const returnedValue =
            await umbOpenModal(this, POLL_MODAL_TOKEN, {
            data: {
                headline: "Select a Poll",
            },
            }).catch(() => undefined);

        this._items = [returnedValue!.poll];
        
        this.#updatePropertyEditorValue();
    }
}

export {
    PollPicker as default
};
declare global {
    interface HTMLElementTagNameMap {
        'mediawiz-poll-picker': PollPicker;
    }
}

[TomChancer (Thomas Chance)]

Hey @huwred

The only thing I can see that “might” be involved is the dispatchEvent call inside your updatePropertyEditorValue.

Personally I’ve always gone the:
this.dispatchEvent(new UmbChangeEvent()) route and that persists.

Looking into CustomEvent I can see theres a “bubbles” boolean argument that talks about the change event bubbling up the DOM tree. Could be that your event is getting caught in the ShadowDom and never reaching Umbraco?

Looking at it, it would be something like:
this.dispatchEvent(new CustomEvent(‘change’, { bubbles: true } ));

[Luuk (Luuk Peters (Proud Nerds))]

I was indeed also looking at the event if that’s the issue. I don’t know if a custom event works. I just grabbed an example from a video package I created and updating the value works like this:

	/**
	 * Updates the value of the editor and dispatches a property value change event.
	 * @param newValue The new value to set the editor to
	 */
	#updatePropertyEditorValue(newValue: undefined | VideoPlayerPropertyEditorModel) {
		this.value = newValue;
		this.dispatchEvent(new UmbPropertyValueChangeEvent());

		// Get all form elements
		const videoUrlInput = this.shadowRoot?.getElementById("videoUrlInput") as UUIInputElement;
	}

I use the UmbPropertyValueChangeEvent and I feel like that’s required to let Umbraco know that the value has changed.

[huwred]

@Luuk

this.dispatchEvent(new UmbPropertyValueChangeEvent());

It says UmbPropertyValueChangeEvent is deprecated but will try both suggestions

[Luuk (Luuk Peters (Proud Nerds))]

Oh this is from Umbraco 16, so I guess something has changed Gonna be interresting when I update this package to 17.

[TomChancer (Thomas Chance)]

@huwred

It says UmbPropertyValueChangeEvent is deprecated but will try both suggestions

Yeah I think UmbChangeEvent is the new Method that replaced UmbPropertyValueChangeEvent.

Effectively used the same way with
this.dispatchEvent(new UmbChangeEvent());

[huwred]

Mmm, tried them all but still doesn’t appear to save anything.
Maybe it is saving it but not retreiving it correctly? WHere is the best place to look to see if anything actually does get saved?

[huwred]

Found the problem, there was an older dodgy datatype hanging around so I think Umbraco got confused. I cleaned everything up and removed the dodgy dattype defs and now all seems to be working

FYI All of the options now work

        this.dispatchEvent(new CustomEvent('change'));
        this.dispatchEvent(new UmbChangeEvent()) 
        this.dispatchEvent(new UmbPropertyValueChangeEvent());