Duplicate tbody in ngFor #5967

ggmod · 2015-12-16T22:50:33Z

If I write something like this:

<tbody *ngFor="#item of [1,2,3]" myTableRow></tbody>

that uses the following component:

@Component({
  selector: '[myTableRow]',
  template: '<tr><td>test</td></tr>'
})
export class MyTableRow {}

then it produces invalid HTML, there will be two nested tbody tags, like this:

<tbody mytablerow="">
  <tbody>
    <tr><td>test</td></tr>
   </tbody>
</tbody>

(In the real application I use this to group together multiple tr tags in a tbody, and the table has many tbody tags after each other)

I get all kinds of malformed tables because of this, and it also breaks the usual table > tbody > td CSS rules, and is actually invalid HTML.
This worked fine with alpha.46, but has been broken since alpha.47.
Demo here: http://plnkr.co/edit/myYJZf6ZZj1ofhIcNj7E?p=preview

The text was updated successfully, but these errors were encountered:

ggmod · 2015-12-27T17:30:05Z

Actually, the issue doesn't depend on ngFor at all, the same thing happens with a template like this:

<tbody myTableRow></tbody>

The problem is caused by the fact that the template parser's required parent logic applies to the template's root elements too: but the parent element of the template's root element is unkown at the time when the template is compiled, it will only be revealed when the component is inserted into the page.

If I change angular's html parser to skip the required parent logic for the root element(s), then everything works fine. In html_parser.ts

if (tagDef.requireExtraParent(isPresent(parentEl) ? parentEl.name : null)) {

should be:

if (isPresent(parentEl) && tagDef.requireExtraParent(parentEl.name)) {

pkozlowski-opensource · 2015-12-28T10:35:51Z

@ggmod what is the version of Angular2 that you are using? Could you please provide a reproduce scenario with plunker (or similar on-line tool)?

ggmod · 2015-12-29T00:09:17Z

Both the plunker and the version number are there in the original post, but here it is again:
http://plnkr.co/edit/myYJZf6ZZj1ofhIcNj7E?p=preview
using the beta version, but the mistake appeared between alpha.46 and alpha.47

pkozlowski-opensource · 2016-01-22T14:46:39Z

Yes, I see, this is a bug. Thnx for reporting.

PhilippeOberti · 2016-02-16T16:57:44Z

hi guys! any idea when this would be fixed? I am using 2.0.0-beta.3 and the issue is still there :)

sasidhar · 2016-02-16T18:35:45Z

+1 Need a fix for this bug

denodaeus · 2016-03-03T18:44:48Z

+1, also need a fix for this bug (using beta.7)

0x-r4bbit · 2016-03-03T18:47:21Z

Maybe someone is willing to try to fix it?

sasidhar · 2016-03-04T00:08:22Z

@PascalPrecht, already @ggmod mentioned a fix above. But it's not a pull request. I am currently using his fix with angular beta.7

cagataycivici · 2016-03-15T20:31:21Z

I seriously need the fix for this bug. +1

I had to make a workaround with using a div with display: table-row to avoid a tbody getting generated.

adrianromanko · 2016-03-17T16:23:57Z

+1

denodaeus · 2016-03-25T14:37:44Z

Is this going to make it into a release soon?

mohsenvafa · 2016-03-25T21:59:48Z

+1 I need also a fix for this.

yassirj1 · 2016-03-30T20:19:40Z

+1 this needs to be fixed

Also, when trying to create a component using
<thead></thead>
angular2 will nest a tbody into it.

tsalzinger · 2016-04-13T07:11:33Z

I just stumpled across the same issue (using beta.14)

The issue acutally seems to be that the template starts with a <tr> element:
http://plnkr.co/edit/7zou2L4rMC8t6LccJbMV

lukaszdechovan · 2016-05-04T08:22:22Z

+1 I would like this bug fixed, as workaround I replaced all table elements with divs and created css classes (such as .table, .thead, .tr, .td, .th) but thats really ugly non-semantic solution.

zoechi · 2016-05-04T08:54:42Z

I guess that's a browser feature. Angular probably creates documentFragments of the HTML (<tr>) before inserting and the browser automatically wrapps it with <tbody> and that is than inserted (just a guess).

tsalzinger · 2016-05-04T15:41:12Z

@zoechi i don't think that's the issue

if you execute

var df = new DocumentFragment();
df.appendChild(document.createElement('tr'));
document.querySelector('body').appendChild(df);

you get exactly the dom you would expect:

<body>
  <tr></tr>
</body>

not very useful or even valid but still exactly what you defined

denodaeus · 2016-05-05T00:44:16Z

Any update on this one? It's a P2 with a fix attached to it -- but this bug still made it into the release candidate.

- Also still experiencing socket cleanup issues due to angular/angular#8458 - Tables were changed with cards in previous commit due to angular/angular#5967

andyrue · 2016-05-12T21:02:56Z

+1 Also just ran into this with rc.1.

fringd · 2016-05-13T14:25:39Z

It seems like you're doing it wrong? here's the way I write this. I don't see any reference to your syntax in the docs at https://angular.io/docs/ts/latest/guide/template-syntax.html

<tbody>
  <myTableRow *ngFor="#item of [1,2,3]"></myTableRow>
</tbody>

EDIT:
looks like this probably won't work either, since you can't have <myTableRow> elements in a tbody...

this is probably what you really want:

<tbody>
  <template *ngFor="#item of [1,2,3]" myTableRow></item>
</tbody>

fringd · 2016-05-13T14:30:55Z

your <tbody *ngFor... myTableRow>
gets translated into

<template [ngFor]...>
  <tbody myTableRow></tbody>
</template>

and your myTableRow component will be re-rendered, including it's host element, which is tbody the way you've constructed it. Maybe the syntax was different earlier, but i think this is how it's supposed to work?

zoechi · 2016-05-13T15:34:28Z

@fringd this should lead to

<tbody mytablerow="">
    <tr><td>test</td></tr>
</tbody>
<tbody mytablerow="">
    <tr><td>test</td></tr>
</tbody>
<tbody mytablerow="">
    <tr><td>test</td></tr>
</tbody>

but the result is

<tbody mytablerow="">
  <tbody>
    <tr><td>test</td></tr>
   </tbody>
</tbody>
<tbody mytablerow="">
  <tbody>
    <tr><td>test</td></tr>
   </tbody>
</tbody>
<tbody mytablerow="">
  <tbody>
    <tr><td>test</td></tr>
   </tbody>
</tbody>

fringd · 2016-05-13T17:21:47Z

oh weird. the example at the top is a confusing example then. why would anybody want multiple tbody elements?

poke · 2016-05-18T14:52:18Z

@pkozlowski-opensource Is there anything we can do to speed this up? There’s already a proposed fix above. Would that be an acceptable fix? Do you need a pull request including that change? Can we please get this fixed soon?

chrille112 · 2016-05-26T08:48:02Z

+1 on this. FYI, in rc1 this is fixed by:
compiler/src/html_parser.js, line 257 should be:
if (lang_1.isPresent(parentEl) && tagDef.requireExtraParent(parentEl.name)) {

eapenjohn · 2016-06-15T07:29:26Z

I am still facing the same issue even after applying the below.Its generate 2 duplicate items
if (lang_1.isPresent(parentEl) && tagDef.requireExtraParent(parentEl.name)) { var newParent = new html_ast_1.HtmlElementAst(tagDef.parentToAdd, [], [el], el.sourceSpan, el.startSourceSpan, el.endSourceSpan); this._addToParent(newParent);

template is
template: <ul> <dataset-tile *ngFor='let dataset of datasets' [hidden]='dataset.hide==true' [dataset]='dataset'></dataset-tile> </ul>

angular version :2.0.0-beta.17

vicb · 2016-06-15T16:40:04Z

fix is coming...

fixes angular#5967

angular-automatic-lock-bot · 2019-09-08T17:22:14Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

pkozlowski-opensource added type: bug/fix P2: required effort2: days labels Jan 22, 2016

ggmod mentioned this issue Apr 27, 2016

tbody element is generated in wrong place #8096

Closed

revov added a commit to revov/uci-gui that referenced this issue May 7, 2016

Fix socket cleanup on logout

4638168

- Also still experiencing socket cleanup issues due to angular/angular#8458 - Tables were changed with cards in previous commit due to angular/angular#5967

ericmartinezr mentioned this issue Jun 15, 2016

TBODY being automatically generated inside of THEAD #9206

Closed

vicb added a commit to vicb/angular that referenced this issue Jun 15, 2016

fix(HtmlParser): do not add required parents to template root elements

6f06e87

fixes angular#5967

vicb added a commit to vicb/angular that referenced this issue Jun 15, 2016

fix(HtmlParser): do not add required parents to template root elements

4b3d078

fixes angular#5967

vicb added a commit to vicb/angular that referenced this issue Jun 16, 2016

fix(HtmlParser): do not add required parents to template root elements

44365ae

fixes angular#5967

vicb added a commit to vicb/angular that referenced this issue Jun 16, 2016

fix(HtmlParser): do not add required parents to template root elements

4ecabac

fixes angular#5967

vicb closed this as completed in e484c62 Jun 16, 2016

ericmartinezr mentioned this issue Sep 26, 2018

Nested tbody when using ng-content #26114

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duplicate tbody in ngFor #5967

Duplicate tbody in ngFor #5967

ggmod commented Dec 16, 2015

ggmod commented Dec 27, 2015

pkozlowski-opensource commented Dec 28, 2015

ggmod commented Dec 29, 2015

pkozlowski-opensource commented Jan 22, 2016

PhilippeOberti commented Feb 16, 2016

sasidhar commented Feb 16, 2016

denodaeus commented Mar 3, 2016

0x-r4bbit commented Mar 3, 2016

sasidhar commented Mar 4, 2016

cagataycivici commented Mar 15, 2016

adrianromanko commented Mar 17, 2016

denodaeus commented Mar 25, 2016

mohsenvafa commented Mar 25, 2016

yassirj1 commented Mar 30, 2016

tsalzinger commented Apr 13, 2016

lukaszdechovan commented May 4, 2016

zoechi commented May 4, 2016

tsalzinger commented May 4, 2016

denodaeus commented May 5, 2016

andyrue commented May 12, 2016

fringd commented May 13, 2016 •

edited

Loading

fringd commented May 13, 2016 •

edited

Loading

zoechi commented May 13, 2016

fringd commented May 13, 2016

poke commented May 18, 2016

chrille112 commented May 26, 2016

eapenjohn commented Jun 15, 2016 •

edited

Loading

vicb commented Jun 15, 2016

angular-automatic-lock-bot bot commented Sep 8, 2019

Duplicate tbody in ngFor #5967

Duplicate tbody in ngFor #5967

Comments

ggmod commented Dec 16, 2015

ggmod commented Dec 27, 2015

pkozlowski-opensource commented Dec 28, 2015

ggmod commented Dec 29, 2015

pkozlowski-opensource commented Jan 22, 2016

PhilippeOberti commented Feb 16, 2016

sasidhar commented Feb 16, 2016

denodaeus commented Mar 3, 2016

0x-r4bbit commented Mar 3, 2016

sasidhar commented Mar 4, 2016

cagataycivici commented Mar 15, 2016

adrianromanko commented Mar 17, 2016

denodaeus commented Mar 25, 2016

mohsenvafa commented Mar 25, 2016

yassirj1 commented Mar 30, 2016

tsalzinger commented Apr 13, 2016

lukaszdechovan commented May 4, 2016

zoechi commented May 4, 2016

tsalzinger commented May 4, 2016

denodaeus commented May 5, 2016

andyrue commented May 12, 2016

fringd commented May 13, 2016 • edited Loading

fringd commented May 13, 2016 • edited Loading

zoechi commented May 13, 2016

fringd commented May 13, 2016

poke commented May 18, 2016

chrille112 commented May 26, 2016

eapenjohn commented Jun 15, 2016 • edited Loading

vicb commented Jun 15, 2016

angular-automatic-lock-bot bot commented Sep 8, 2019

fringd commented May 13, 2016 •

edited

Loading

fringd commented May 13, 2016 •

edited

Loading

eapenjohn commented Jun 15, 2016 •

edited

Loading