HTML element ordering changes due to hook

Developers
#1

I created a wiki to demonstrate the problem: https://weird-layout.tiddlyhost.com/

It has a plugin ‘delicious’ and two tiddlers under $:/customization.

To see the problem, go to $:/AdvancedSearch, and under the Bookmarks tab, enter in the tags input ‘bookmark’ and in the description ‘host’. note the layout of the result and in particular, that the list of tags appear below the tiddler link. Switch to another search tab and back to Bookmarks and note that the tags are now below the tiddler preview. Delete a character in the description and note the tags are again below the link

The tiddler $:/customization/extlinks.js listens to the th-renderering-element hook and then only clones parseTreeNodes, changes the element type and returns it. The other tiddler just handles this type.

The tiddler that implements the bookmarks search is under $:/plugins/ittay/delicious/search

#2

My guess is that this is due to Widget.prototype.findFirstDomNode that is used in findNextSiblingDomNode, when replacing a parse tree node, this.domNodes is not updated with the rendered nodes. So when the element after is rendered its sibling is wrong.

#3

I think I found the reason. The issue is with rendering 3 widgets. There’s a ‘nextSibling’ that is passed to widgets, but is not passed if the th-rendering-hook returns a parseTreeNode. So rendering the alternative PTN puts it as the last child of the parent. In my case, this happens with the 2nd widget (child), so then the third one is rendered with 'nextSibling" and therefore adds itself before the 2nd

To check this, I wrapped the link with a span and the problem went away…

#4

Great thanks @Ittayd, I’ll reply over on the GitHub thread

1 Like