riot-js

Open full view…

Misplaced form end-tag

Stuart Rackham
Thu, 05 Feb 2015 20:45:48 GMT

If you use XHTML style self-closing tags on an input element inside a form they cause the form end-tag to render prematurely. For example, this: ``` <form onsubmit={add}> <input name='input' type='text' placeholder='New Todo' autofocus='true'/> <input type='submit' value='Add Todo'> </form> ``` Renders like this: ``` <form> <input name="input" type="text" placeholder="New Todo" autofocus="true"> </form> <input type="submit" value="Add Todo"> ``` The submit button is outside the form and does not generate a form onsubmit event. This looks like a bug because the "/" should just be ignored: The [HTML5 spec states](http://www.w3.org/TR/html5/syntax.html#start-tags) that "if the element is one of the void elements, or if the element is a foreign element, then there may be a single "/" (U+002F) character. This character has no effect on void elements" Observed in Riot version 2.0.7.

Tero Piirainen
Wed, 11 Feb 2015 06:25:00 GMT

This is fixed on the latest release (2.0.8). Thanks!

Stuart Rackham
Sun, 15 Feb 2015 09:44:16 GMT

The first example now "works" but it has XML (not HTML5) semantics i.e. the generated DOM no longer has HTML5 semantics. The cure is worse than the disease -- just drop the use of <foo/>-like XML style markup (I'm assuming that tags are HTML5, not some custom mix of XHTML and HTML5).