Unquoted onsubmit in a form doesn't render as expected

[davidmerrique]

Hi, just found a bug.

hyperHTML.wire()`
<form onsubmit=${onsubmit}>
  <input type="email"/>
  <button>Submit</button>
</form>
`;

<!-- output -->
<form>
  <input type="email"/>
</form>
<button>Submit</button>

Everything else in the form is rendered outside of the form element.

Putting quotes around (onsubmit="${onsubmit}") fixes it.

Related to #172?

Thanks

[davidmerrique]

@WebReflection Check out this pen https://codepen.io/davidmerrique/pen/ddONwe

It actually looks like the problem is with the / in input: Not working <input type="email"/> Working <input type="email">

edit: Looks like when the input has a /, it breaks. But put the onsubmit in quotes and it starts working again.

[WebReflection]

gotcha, good test case there.

function onsubmit() {
  console.log('not working')
}

const working = hyperHTML.wire()`
<form onsubmit=${onsubmit}>
  <input type="email" placeholder="Working">
  <button>Button</button>
</form>
`

const notWorking = hyperHTML.wire()`
<form onsubmit=${onsubmit}>
  <input type="email" placeholder="Not Working"/>
  <button>Button</button>
</form>
`

const butThisWorks = hyperHTML.wire()`
<form onsubmit="${onsubmit}">
  <input type="email" placeholder="But this is working"/>
  <button>Button</button>
</form>
`

hyperHTML.bind(document.body)`${[
  working,
  butThisWorks,
  notWorking
]}`;

[WebReflection]

@davidmerrique if you change your external script with just https://unpkg.com/hyperhtml that brings in 2.5.10 you'll see the issue has been fixed.

Thanks for filing this and writing the demo, all use cases (and more) are now officially tested. https://github.com/WebReflection/hyperHTML/blob/master/test/test.js#L998-L1033

This bug helped a lot to make latest self-closing tag changes truly reliable, awesome stuff!

[davidmerrique]

@WebReflection Thanks so much!