FlowFuse / FlowFuse/node-red-dashboard

Self closing component tags in ui-template hang the dashboard

Open
#2,210 0 comments 0 reactions 0 assignees View on GitHub
needs-triage type:bug
Dominant language
HTML
Stars
355
Forks
82
Avg merge
4d 23h
Merged PRs (30d)
24

Description

### Current Behavior

A ui-template widget using self-closing syntax on a custom/Vuetify component
that has an adjacent v-else can hang the dashboard page on load, sometimes
taking any embedded Node-RED editor down with it too. Changing the same tag
to an explicit open/close pair fixes it.

FWIW, i did some digging:

### Root cause

`parseCustomTemplate()` in UITemplate.vue extracts the `` block with
the browser's native HTML parser (`DOMParser().parseFromString(format,
'text/html')`). HTML5 only honours self closing syntax on real void elements
(br, img, etc). For an unknown custom element like v-btn, the parser ignores
the trailing / and keeps the tag open, so v-icon parses as v-btn's child
instead of its sibling. That breaks Vue's requirement that v-else sit on the
immediate next sibling of the v-if element, and the widget hangs instead of
rendering.

In short, blocks need depth aware scanning (not a naive regex) to detect and fail or fix

### Expected Behavior

should not hang!

### Steps To Reproduce

Repro - add to a ui-template, deploy and open dashboard.

```html



mdi-check-circle

export default {
data () { return { show: true } }
}

```

### Environment

- Dashboard version: current / live
- Node-RED version:
- Node.js version:
- npm version:
- Platform/OS:
- Browser:

### Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in UITemplate.vue at parseCustomTemplate(), especially the DOMParser-based extraction of the block. Reproduce the issue with the supplied v-btn/v-icon example and inspect how the parsed tag structure affects the adjacent v-else. Done means the dashboard no longer hangs for this self-closing custom-component case, with the handling decision implemented for malformed blocks.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.