<label> around an input field eats following elements

[josephg]

I'm not sure what the problem is, but if I have an input field inside a label as recommended by mdn:

bel(`<div>
  <label> <input type="checkbox" checked> text </label>
  <a>outside</a>
</div>`).toString();

// ->
<div>
  <label> <input type="text" type="type" checkbox"="checkbox&quot;" />
    <a>outside</a>
  </label>
</div>

... The following elements somehow teleport inside the label.

[Edited: Added checked to the input tag, which is required to reproduce the bug.]

[jamesplease]

Can you make a requirebin? This seems to work for me.

lol super pixely img:

[josephg]

Oops! I was a bit too keen at trimming down the test case. Requirebin only works in incognito windows for some reason for me, where I'm not logged in to github. (That or it takes 20+ seconds to start up, in which case I'm just not patient enough.)

Anyway:

var bel = require('bel');

var html = bel`<div>
  <label>
    <input type="checkbox" id="keep" checked>text
  </label>
  <a>Outside</a>
</div>`;

console.log('hello', html);

Cases:

• <input type="checkbox" id="keep" checked>: buggy
• <input type="checkbox" id="keep" checked=true>: buggy
• <input type="checkbox" id="keep" checked="true">: ok
• <input type="checkbox" id="keep" checked />: ok

[yoshuawuyts]

Probably related to #28

[jamesplease]

Ah, oops, somehow the checked attr got removed when I was playing around in Requirebin, and I didn't notice.

Thanks for taking the time to make that Requirebin, even though it sounded pretty tedious to set up :P The two issues do seem likely to be related – thanks @yoshuawuyts !

[shama]

I'll look into this again soon. That and <br/> doesn't work but <br /> does!

[goto-bus-stop]

This appears to be fixed in the latest hyperx; probably by choojs/hyperx@d85b56b. thanks!