diff --git a/core/static/webpack/core/components/ajax-select-index.ts b/core/static/webpack/core/components/ajax-select-index.ts index 3dedce14..4ba1e091 100644 --- a/core/static/webpack/core/components/ajax-select-index.ts +++ b/core/static/webpack/core/components/ajax-select-index.ts @@ -60,12 +60,6 @@ class AutocompleteSelect extends inheritHtmlElement("select") { connectedCallback() { super.connectedCallback(); - for (const option of Array.from(this.children).filter( - (child) => child.tagName.toLowerCase() === "option", - )) { - this.removeChild(option); - this.node.appendChild(option); - } this.widget = new TomSelect(this.node, this.tomSelectSettings()); this.attachBehaviors(); } @@ -129,6 +123,7 @@ abstract class AjaxSelect extends AutocompleteSelect { protected abstract renderItem(item: TomOption, sanitize: typeof escape_html): string; protected abstract search(query: string): Promise; + private initialValues: TomOption[] = []; public setFilter(filter?: (items: TomOption[]) => TomOption[]) { this.filter = filter; } @@ -176,13 +171,20 @@ abstract class AjaxSelect extends AutocompleteSelect { }; } + connectedCallback() { + /* Capture initial values before they get moved to the inner node and overridden by tom-select */ + this.initialValues = Array.from(this.children) + .filter((child) => child.tagName.toLowerCase() === "slot") + .map((slot) => JSON.parse(slot.innerHTML)); + + super.connectedCallback(); + } + protected attachBehaviors() { super.attachBehaviors(); // Gather selected options, they must be added with slots like `json` - for (const value of Array.from(this.children) - .filter((child) => child.tagName.toLowerCase() === "slot") - .map((slot) => JSON.parse(slot.innerHTML))) { + for (const value of this.initialValues) { this.widget.addOption(value, false); this.widget.addItem(value[this.valueField]); } diff --git a/core/static/webpack/core/components/easymde-index.ts b/core/static/webpack/core/components/easymde-index.ts index eba719d9..d99799a0 100644 --- a/core/static/webpack/core/components/easymde-index.ts +++ b/core/static/webpack/core/components/easymde-index.ts @@ -193,10 +193,6 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => { class MarkdownInput extends inheritHtmlElement("textarea") { connectedCallback() { super.connectedCallback(); - const initialValue = this.querySelector("slot[name='initial']"); - if (initialValue as HTMLSlotElement) { - this.node.textContent = initialValue.textContent; - } loadEasyMde(this.node); } } diff --git a/core/static/webpack/utils/web-components.ts b/core/static/webpack/utils/web-components.ts index f6949731..8bec98f9 100644 --- a/core/static/webpack/utils/web-components.ts +++ b/core/static/webpack/utils/web-components.ts @@ -43,7 +43,11 @@ export function inheritHtmlElement(tagNam this.removeAttributeNode(attr); this.node.setAttributeNode(attr); } - // Atuomatically add node to DOM if autoAddNode is true or unspecified + + this.node.innerHTML = this.innerHTML; + this.innerHTML = ""; + + // Automatically add node to DOM if autoAddNode is true or unspecified if (autoAddNode === undefined || autoAddNode) { this.appendChild(this.node); } diff --git a/core/templates/core/widgets/markdown_textarea.jinja b/core/templates/core/widgets/markdown_textarea.jinja index 1531ed3f..1131d5bd 100644 --- a/core/templates/core/widgets/markdown_textarea.jinja +++ b/core/templates/core/widgets/markdown_textarea.jinja @@ -2,8 +2,6 @@ - - {% if widget.value %}{{ widget.value }}{% endif %} - + {% if widget.value %}{{ widget.value }}{% endif %}