Button form attribute does not render/missing after compiled in DOM

[liho98]

Stencil version:

 @stencil/core@ <^1.17.3>

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: you can see the form attribute is missing after compile in DOM.

Expected behavior:

I want the form attribute to work, so i can handle multiple form submission.

Steps to reproduce: just add form attribute in tag

Related code:

      <Host style={{ all: "unset" }}>
        <button
          type={this.type}
          style={this.buttonStyle}
          class={`rm-button--button ${this.class}`}
          value="Submit"
          form="form1"
        >
          <slot></slot>
        </button>
      </Host>

Other information:

[claviska]

Confirmed with a minimal component:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-button',
  shadow: true,
})
export class AppHome {
  render() {
    return <button form="form-id-here">Submit</button>;
  }
}

The resulting markup looks like this:

[claviska]

@adamdbradley any idea what might be causing this? I'm happy to take a stab at it if you can point me in the right direction.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[thccorni]

As a workaround I managed to use ref to get it to work:

<button
  ref={(btn) => btn?.setAttribute('form', 'form-id-here')}
>
  Submit
</button>

But it is a little ugly, I know.

[KevinCarnaille2]

FYI, still having the issue in Stencil 2.17.3 :)

@thccorni workaround is working ;)

[DavideMininni-Fincons]

Hello guys! Yesterday I found this issue while having some trouble setting the form attribute on this component, based on Stencil.

The walkaround from @thccorni seems to work (thank you!)

If it could help, I debugged a bit the @stencil/core/internal/client/index.js; at line 398 you could see that all params looks good and the set should be done.. but if I move one line ahead, and check for elm[memberName], it's null. I'm adding two screenshots.

[rwaskiewicz]

Thanks all! I've confirmed this is an issue with the minimal reproduction case above. I'm going to label this for the team to look into further

[brendensoares]

Try adding a unique key attribute and see if that keeps the element from being recreated.

The key prop is not yet well documented [1][2], but I stumbled onto it when dealing with a similar issue (integrating Stripe's Elements UI DOM mounting into a ref'd div) and it seems to have addressed the issue for me (where the div was being seemingly recreated and the referenced DOM element was lost).

PS - I'm not 100% certain of my exact issue, but I know enough to feel confident that key helped.

EDIT: this may be relevant.

[timsnadden]

This also applied to inputs

[Adamkillander96]

This issue is still present in @stencil/core@^4.7.2

We worked around it by checking after render and adding 'form' with setAttribute function.

componentDidRender() {
  if (this.form) {
    this.hostElement.querySelector('button').setAttribute('form', this.form);
  }
}