Angle bracket component with splattributes not correctly merging attributes

[barryofguilder]

In my Ember 3.10 app, I have a button component that has tageName: '' set, and then in the template, I'm using splattributes. I'm getting some unexpected behavior when I try to override the attributes.

Below are some code snippets to explain it, but you can see it in detail in my repository here.

Here is my button component:

import Component from '@ember/component';
	
export default Component.extend({
  tagName: ''
});

and template

<button type="button" data-test-id="button" ...attributes>
  {{yield}}
</button>

If I use my button component by itself, the data-test-id attribute is overriden correctly, but the type attribute is still using the component's default of "button":

<XButton type="submit" data-test-id="submit-btn">Save</XButton >

{{!-- generated HTML --}}
<button type="button" data-test-id="submit-btn">Save</button>

If I'm yielding it out with the component template helper, it does not correctly override either of them:

<form>
  {{yield
    (
      hash
        submit=(
          component
            "x-button"
            data-test-id="submit-btn"
            type="submit"
        )
    )
  }}
</form>

{{!-- generated HTML --}}
<form>
  <button type="button" data-test-id="button">Save</button>
</form>

This doesn't seem correct to me. It seems that at least in the scenario where I'm using the component directly, it should override all of the attributes. The component helper scenario might make sense if it's only passing component properties and not element attributes.

[chancancode]

I think this was fixed in 3.11. Mind upgrading?

[barryofguilder]

The repo that I linked to is actually using 3.11.1. 😬

[chancancode]

Hmm, turns out this is indeed still a bug. This is specific to the type attribute. This patch changed things to ensure that type attribute is set last, but did not take into account ...attributes overwriting. I think the compile-time fix in the original patch is probably not viable, and it needs to be reverted in favor of a runtime patch using the Operations API (for component elements at least).

[barryofguilder]

What about the use case with the component template helper? In that one, neither is working. Will that not work with angle bracket components and splattributes?

[chancancode]

What about the use case with the component template helper?

Sorry.. I'm no sure if I understand what you mean here

[barryofguilder]

The second part of my original post where I have this code:

<form>
  {{yield
    (
      hash
        submit=(
          component
            "x-button"
            data-test-id="submit-btn"
            type="submit"
        )
    )
  }}
</form>

{{!-- generated HTML --}}
<form>
  <button type="button" data-test-id="button">Save</button>
</form>

It seems that the component template helper isn't correctly merging any of the attributes.

[chancancode]

There is no way to pass html attributes to the component helper at all, but that is a different issue/feature reauest

[barryofguilder]

Ok, I will make a new issue for that use case.

[rwjblue]

This is specific to the type attribute. This patch changed things to ensure that type attribute is set last, but did not take into account ...attributes overwriting.

Yeah, ...attributes was not a thing when that commit landed. This also explains another open issue (RE: <input>s type attribute not being overridable with ...attributes).

[robclancy]

This is kind of a big bug? You can't use the type attribute at all with glimmer components and need to use an argument.

The fact you can't do anything with attributes passed in makes this worse, it is basically impossible to use type="submit". The fact you can't access ...attributes separately or on the js side is annoying already. Now I have an attribute I can not use at all and have to remember to do @type="submit" everytime.

[pzuraq]

Can we potentially update the logic such that the merging happens before we assign any values at all? That way we can still assign type last, it'll just be the final, merged value of type.