Skip to content

Wrong ordering of table rows when adding new #3241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alg opened this issue Feb 23, 2015 · 4 comments
Closed

Wrong ordering of table rows when adding new #3241

alg opened this issue Feb 23, 2015 · 4 comments

Comments

@alg
Copy link

alg commented Feb 23, 2015

Gents,

I'm having a simple single column table with rows coming from a simple list. The last row of the table is the link to add another row with some default content through the callback to the list component. Expected that the last "add new row" static row remains the last and the new row is added prior to it. In practice, the new row is added after the static row. Here's the gist of it:

http://jsbin.com/lahuda/1/edit?html,output

If I'm using DIVs instead of the table, it all works fine. I tried using keys with the key with "z" as a value being assigned to the static row and the rest having lexically lower values to no success.

Sounds like a bug to me.

@zpao
Copy link
Member

zpao commented Feb 23, 2015

Is this specific example not working for you? It appears to be doing as you expect (in firefox and chrome at least), the "add new row" is always the last item.

(ps. let's try not to assume "gents")

@alg
Copy link
Author

alg commented Feb 23, 2015

Ouch. I possibly have forgotten to clone the bin and kept playing in the one I shared. Here's the original that is not working for me:

http://jsbin.com/lahuda/3/edit?html,output

The one that you saw is my further effort to make it work. Strangely, after some rearrangement it started producing expected results, but nothing I can see radically different.

(P.S. let's)

@zpao
Copy link
Member

zpao commented Feb 23, 2015

Ah, looks like the main difference is the lack of <tbody> in the broken example. Browsers are "fun" and will change the DOM after you insert markup. So when you write a table without a tbody, the browser inserts one for you. Your original rows are in that tbody but the new rows are appended directly to the table. So that's why they show up after the original content. We have a warning that fires in some conditions as we try to detect this but we can't always, which leads to weird things like this.

@zpao zpao closed this as completed Feb 23, 2015
@syranide
Copy link
Contributor

@zpao Related #2262, optimistically traversing unexpected nodes like we do now for tbody just seems like a bad idea to me, it hides invalid nesting issues like this and make them only surface sometimes rather than consistently which seem far preferable to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants