emberjs
[Failing Test] {{on}} modifier removes valueless attributes
Noticed today that using the {{on}} modifier on an element with the required attribute removed the attribute.
e.g.
template: <input type='text' required {{on 'input' this.onInput}} >
resulted in
DOM: <input type='text' >
However, adding a value to the attribute caused it to remain.
e.g.
template: <input type='text' required='true' {{on 'input' this.onInput}} >
resulted in DOM
DOM: <input type='text' required >
While adding a failing test for required, I also added checks for other boolean attributes.
autofocus, required, and disabled are all removed, while readonly is preserved.
I believe the problem is with the {{on}} modifier because
template: <input type='text' required >
results in
DOM: <input type='text' required >.
I looked through the {{on}} modifier source and nothing jumped out at me, so maybe it isn't directly an {{on}} problem though?
Side Note:
I made the disabled element a button to show that it is not only input that is affected.
This appears to occur with any modifier except {{action}}, which leads me to believe this is a VM issue.
We can fix it with an AST transform until we finish the upgrade, which can also be backported to LTS
Can you confirm that this is not about boolean attributes, but is actually about valueless attributes (which are often boolean, 😸)?
Would adding a video element with a controls attribute to the test confirm this? I didn't realize there was a distinction.
@kturney ya, any attribute would do, even something like <button data-foo {{on 'click' this.wahtever}}>Click Me!</button>. If that works or not will point towards different types of fixes needed...
