Tabs: [suiTabContent] is ignored when inside a form tag

[ThanosSoulis]

Bug description:

[suiTabContent] seems to be ignored when inside a form tag as console outputs error :

" A [suiTabHeader] must have a related [suiTabContent] "

even when there are matching [suiTabHeader] and [suiTabContent]. On the demo, at src/app/app.component.html if you uncomment (1) or (2) instead of (3) you can see the tabs work as expected.

Link to minimally-working plunker that reproduces the issue:

Not an actual plunker but a stackblitz

Version of Angular, ng2-semantic-ui, and Semantic UI:

Angular: 6.0.1

ng2-semantic-ui: 0.9.7

Semantic UI: 2.3.2

[genuinefafa]

it is pretty strange, if wrap the entire <sui-tabset> in the form it works... can you do that?

[ThanosSoulis]

it is pretty strange, if wrap the entire in the form it works... can you do that?

@genuinefafa You are right it does work, but I don't think it is semantically correct. The div with the tabs does not belong inside a form tag imo as it has nothing to do with the form.

To clarify what I intended to do and how I encountered this bug, is that I wanted to break down a really big form into tabs to make the process of filling it simpler/clearer

[genuinefafa]

this is definitely a bug, but i'm just trying to figure out why you have that problem! at least find a workaround.