FlowFuse / FlowFuse/node-red-dashboard
Self closing component tags in ui-template hang the dashboard
- 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