Inline field with list only displays last entry in Live Preview mode

[rben01]

What happened?

In Live Preview, when using an inline field of the form [property:: "value1", "value2"], only value2 (or whatever the last value in the list is) is shown. In the other two modes (Source and Reading) the inline field appears as expected. This occurs in the sandbox vault where Dataview is the only plugin installed.

Source mode

Live Preview mode

Reading mode

DQL

[property:: 1, 2]
[property:: "x", "y"]

JS

N/A

Dataview Version

0.5.66

Obsidian Version

Version 1.5.11

OS

MacOS

[holroy]

I reckon, without knowing, this could be a side effect of the bug described in #2216. I've seen it before.

The current workaround if I remember it correctly is to split the value setting into two, i.e. [prop:: 1] [prop:: 2]] It might not look nice, but in terms of setting the value to a list value it should work.

[holroy]

Sorry for adding to the confusion, but I just saw that this happens only in live preview, and the other one is happening in reading mode. So they might not be connected after all, but then again the changes in the other variant does something strange...

[rben01]

Looking at the source code,

obsidian-dataview/src/ui/render.ts

Line 46 in 4829a83

container.replaceChildren(...paragraph.childNodes);

seems like it just replaces the rendered span with each element of the list, so only the last one wins.

Passing the context through in

obsidian-dataview/src/ui/render.ts

Line 9 in 4829a83

export async function renderCompactMarkdown(

and then checking whether it's "list" in

obsidian-dataview/src/ui/render.ts

Line 45 in 4829a83

if (tmpContainer.childNodes.length == 1 && paragraph) {

(where? not sure), and if it is, then appending children instead of replacing. (Or maybe just always appending? Not sure what replacing does that appending wouldn't do — what are the initial children of the node in question?)

Anyway, making these changes, to get the following code,

async function renderCompactMarkdownForInlineFieldLivePreview(
    app: App,
    markdown: string,
    container: HTMLElement,
    sourcePath: string,
    component: Component,
    context: ValueRenderContext
) {
    const tmpContainer = createSpan();
    await MarkdownRenderer.render(app, markdown, tmpContainer, sourcePath, component);

    let paragraph = tmpContainer.querySelector(":scope > p");

    if (tmpContainer.childNodes.length == 1 && paragraph) {
        if (context !== "list") {
            container.replaceChildren(...paragraph.childNodes);
        } else {
            for (let child of paragraph.childNodes) {
                container.appendChild(child);
            }
        }
    } else {
        container.replaceChildren(...tmpContainer.childNodes);
    }

    tmpContainer.remove();
}

I get the following output in live preview:

I'm wary of submitting a PR because I really have no idea how this plugin works; I just followed the trail of the console.logs I added and ended up here.

[kazerniel]

Thank you for opening this issue, I encountered the same problem (on Windows).